CSSとJavaScriptで作るパスワード検証フォームの実装方法を徹底解説

CSSとJavaScriptを組み合わせることで、ユーザーが入力中のパスワードが条件を満たしているかどうかをリアルタイムに視覚的に確認できる、使い勝手の良い検証フォームを作成できます。本記事では、小文字・大文字・数字の含有チェックを行うパスワード検証フォームの具体的な実装方法を、サンプルコード付きで解説します。

完成イメージと仕組み

このフォームでは、以下のようなユーザー体験を実現します。

パスワード入力欄にフォーカスすると、検証条件の一覧が表示される
入力内容に応じて、各条件が満たされているか（✔）満たされていないか（✖）が色分けされて表示される
入力欄からフォーカスが外れると、検証条件の一覧が非表示になる

コード例

それでは、HTML・CSS・JavaScriptを使った完全なサンプルコードを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    input {
        width: 100%;
        padding: 12px;
        margin-top: 6px;
        margin-bottom: 16px;
    }
    input[type="submit"] {
        background-color: rgb(69, 27, 117);
        color: white;
        font-weight: bold;
        font-size: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    form {
        padding: 20px;
    }
    #checksField {
        display: none;
        background: #f1f1f1;
        color: #000;
        position: relative;
        padding: 20px;
        margin-top: 10px;
    }
    #checksField p {
        padding: 10px 35px;
        font-size: 18px;
    }
    .correct {
        color: rgb(28, 0, 128);
    }
    .correct:before {
        position: relative;
        left: -35px;
        content: "✔";
    }
    .wrong {
        color: red;
    }
    .wrong:before {
        position: relative;
        left: -35px;
        content: "✖";
    }
</style>
</head>
<body>
<h1 style="text-align: center;">Password Validation Example</h1>
<form>
<label for="uname">Username</label>
<input type="text" id="uname" name="uname" required />
<label for="pass">Password</label>
<input
    type="password"
    id="pass"
    name="pass"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8}"
    title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
    required
/>
<input type="submit" value="Submit" />
</form>
<div id="checksField">
<h3>Password must contain the following:</h3>
<p id="letter" class="wrong">A <b>lowercase</b> letter</p>
<p id="capital" class="wrong">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="wrong">A <b>number</b></p>
</div>
<script>
    var myInput = document.getElementById("pass");
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    myInput.onfocus = function() {
        document.getElementById("checksField").style.display = "block";
    };
    myInput.onblur = function() {
        document.getElementById("checksField").style.display = "none";
    };
    myInput.onkeyup = function() {
        var lowerCaseLetters = /[a-z]/g;
        if (myInput.value.match(lowerCaseLetters)) {
            letter.classList.remove("wrong");
            letter.classList.add("correct");
        } else {
            letter.classList.remove("correct");
            letter.classList.add("wrong");
        }
        var upperCaseLetters = /[A-Z]/g;
        if (myInput.value.match(upperCaseLetters)) {
            capital.classList.remove("wrong");
            capital.classList.add("correct");
        } else {
            capital.classList.remove("correct");
            capital.classList.add("wrong");
        }
        var numbers = /[0-9]/g;
        if (myInput.value.match(numbers)) {
            number.classList.remove("wrong");
            number.classList.add("correct");
        } else {
            number.classList.remove("correct");
            number.classList.add("wrong");
        }
    };
</script>
</body>
</html>

コードのポイント解説

1. 正規表現による入力チェック

JavaScript側では、onkeyupイベントを利用して、キーが押されるたびに入力値を正規表現で判定しています。使用している主なパターンは次の3つです。

/[a-z]/g：小文字の英字が含まれているか
/[A-Z]/g：大文字の英字が含まれているか
/[0-9]/g：数字が含まれているか

2. クラスの切り替えによる表示の変化

条件を満たしていれば「correct」クラス（青色＋✔マーク）、満たしていなければ「wrong」クラス（赤色＋✖マーク）を付け替えることで、視覚的にフィードバックを返します。マーク自体はCSSの:before疑似要素で表示しているため、HTMLを複雑にせずに済むのがポイントです。

3. フォーカス時のみヘルプを表示

onfocusで検証条件の一覧を表示し、onblurで非表示にすることで、画面が煩雑にならずユーザーが必要なときだけガイドを参照できる設計になっています。

4. pattern属性による二重の検証

input要素にはpattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8}"を指定しており、JavaScriptによるリアルタイムチェックに加え、送信時にブラウザ標準のバリデーションでも「8文字以上・数字・大文字・小文字を含む」という条件が強制されます。

出力結果

上記のコードを実行すると、まず次のようなフォーム画面が表示されます。

CSSとJavaScriptで作るパスワード検証フォームの実装方法を徹底解説

続いて、ユーザー名とパスワードを入力すると、入力内容に応じて各条件の達成状況が✔／✖でリアルタイムに切り替わります。

CSSとJavaScriptで作るパスワード検証フォームの実装方法を徹底解説

まとめ

このように、CSSとJavaScriptを組み合わせれば、少ないコード量で直感的に操作できるパスワード検証フォームを実装できます。条件の追加やデザインのカスタマイズも容易なので、実際のWebサイトの登録フォームなどにも応用してみてください。

JavaScriptでパスワードの表示・非表示を切り替える方法をわかりやすく解説

JavaScriptでEnterキー押下時にボタンクリックをトリガーする方法

CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説
CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。アコーディオンの実装例以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini
HTMLとCSSでサインアップフォームを作成する方法【初心者向け】
HTMLとCSSを組み合わせることで、モダンで使いやすいサインアップ（新規登録）フォームを簡単に作成できます。この記事では、メールアドレスとパスワードの入力欄、「ログイン状態を保持」チェックボックス、さらに登録・キャンセルボタンを備えた実用的なフォームを、実際のコード例とともにわかりやすく解説します。サインアップフォームの完全なコード例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ font-family: Seg