会員登録フォームでパスワードを入力すると、文字数や使用している文字の組み合わせに応じて強度をリアルタイムで判定する方法を紹介します。入力内容が変わるたびに判定結果が更新され、現在のパスワードがどの程度の強度なのかを確認できます。
今回は、パスワードの強度を「弱い」「普通」「強い」「とても強い」の4段階で表示します。8文字未満は「弱い」、8文字以上は「普通」と判定し、英大文字・英小文字・数字をすべて含むと「強い」、さらに記号を含むと「とても強い」に変化します。判定結果は段階ごとに文字色が切り替わるため、入力内容による違いを視覚的にも確認できます。
デモでは、パスワードを入力・削除しながら判定結果の変化を試せます。また、入力した文字列はJavaScriptで取得でき、取得結果には値・変数の内容・データ型がリアルタイムで表示されます。取得した値は、パスワードの条件確認など、別の処理にも利用できます。
なお、今回の強度判定は文字数と文字の種類を組み合わせた簡易的なものです。「とても強い」と表示された場合でも、推測されやすい文字列や使い回しているパスワードの安全性まで保証するものではありません。
デモ
パスワードを入力すると強度をリアルタイムで判定します。
普通：8文字以上
強い：8文字以上 + 英大文字 + 英小文字 + 数字
とても強い：8文字以上 + 英大文字 + 英小文字 + 数字 + 記号
パスワードを入力すると、文字数や英大文字・英小文字・数字・記号の組み合わせに応じて、強度が「弱い」「普通」「強い」「とても強い」の4段階で変化します。取得結果では、入力した値・変数の内容・データ型をリアルタイムで確認できます。実際に使用しているパスワードは入力せず、テスト用の文字列でお試しください。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>会員登録フォームのパスワード強度チェック</title>
<!-- 会員登録フォームのCSSを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 会員登録フォーム全体 -->
<div class="member-registration-password-strength-check_wrap">
<!-- フォームのタイトル -->
<div class="member-registration-password-strength-check_title">
会員登録フォーム
</div>
<!-- フォームの説明 -->
<p class="member-registration-password-strength-check_text">
パスワードを入力すると強度をリアルタイムで判定します。
</p>
<!-- パスワード入力欄 -->
<div class="member-registration-password-strength-check_field">
<label class="member-registration-password-strength-check_label" for="member-registration-password-strength-check-password">
パスワード
</label>
<!-- 入力文字を伏せて表示するパスワード入力欄 -->
<input class="member-registration-password-strength-check_input" type="password" id="member-registration-password-strength-check-password" name="password" placeholder="パスワードを入力" autocomplete="new-password" aria-describedby="member-registration-password-strength-check-result">
<!-- JavaScriptでパスワード強度の判定結果を表示 -->
<div class="member-registration-password-strength-check_result" id="member-registration-password-strength-check-result" aria-live="polite">
パスワードを入力してください。
</div>
</div>
<!-- パスワード強度の判定基準 -->
<div class="member-registration-password-strength-check_rule">
<div class="member-registration-password-strength-check_rule-title">
判定基準
</div>
弱い：8文字未満<br>
普通：8文字以上<br>
強い：8文字以上 + 英大文字 + 英小文字 + 数字<br>
とても強い：8文字以上 + 英大文字 + 英小文字 + 数字 + 記号
</div>
</div>
<!-- パスワード強度を判定するJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、パスワードの入力内容をJavaScriptで取得し、文字数と使用されている文字の種類から強度を判定する仕組みです。判定結果は入力欄の下に表示され、入力内容が変わるたびに「弱い」「普通」「強い」「とても強い」の4段階で更新されます。
HTMLではパスワード入力欄と判定基準を配置し、CSSではフォームの外観と判定結果の文字色を設定しています。JavaScriptでは入力された文字列を調べ、条件に応じて判定結果とCSSクラスを切り替えています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、会員登録フォームのタイトル、パスワード入力欄、強度の判定結果、4段階の判定基準を記述しています。パスワード入力欄にはtype="password"を指定し、入力した文字が伏せ字で表示されるようにしています。
style.cssでは、フォームの横幅・余白・枠線・角丸・背景色などを設定しています。また、パスワードの強度に応じて、判定結果を赤色・オレンジ色・青色・緑色に切り替えるスタイルを用意しています。
script.jsでは、パスワードの入力内容を取得し、文字数・英大文字・英小文字・数字・記号の有無を確認して、強度をリアルタイムで判定しています。
設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開きます。
会員登録フォームが表示されたら、パスワード入力欄にテスト用の文字列を入力してください。8文字未満では「弱い」、8文字以上では文字の組み合わせに応じた判定結果が表示されます。文字を追加・削除すると判定結果も更新され、すべて削除すると「パスワードを入力してください。」に戻ります。
このサンプルはパスワードの強度を表示するもので、会員情報の送信・保存やアカウント登録処理は実装していません。
パスワードの入力値を取得する方法
script.jsでは、document.getElementById()を使用して、パスワード入力欄と判定結果の表示先を取得しています。
index.htmlでは、入力欄にid="member-registration-password-strength-check-password"、判定結果の表示先にid="member-registration-password-strength-check-result"を設定しています。
// パスワード入力欄を取得
const passwordInput = document.getElementById("member-registration-password-strength-check-password");
// パスワード強度の表示先を取得
const strengthResult = document.getElementById("member-registration-password-strength-check-result");
passwordInputにはパスワード入力欄の要素、strengthResultには判定結果を表示する要素が入ります。HTML側のIDとgetElementById()に指定する文字列は一致させてください。
入力されたパスワードは、checkPasswordStrength()関数内でvalueプロパティを使用して取得しています。
// パスワード入力欄の値を取得
const password = passwordInput.value;
取得した値は変数passwordに代入され、データ型は文字列（string）になります。例えば「Abc12345」と入力すると、変数passwordには"Abc12345"が入ります。未入力の場合は空文字列""になります。
この変数を使用して文字数や文字の種類を確認しています。取得した値を別の処理にも利用したい場合は、checkPasswordStrength()関数内で変数passwordを使用してください。ただし、実際のパスワードをコンソールなどに出力しないよう注意してください。
英大文字・英小文字・数字・記号を判別する仕組み
パスワードの強度を判定するため、script.jsでは正規表現とtest()を使用しています。取得した文字列に指定した種類の文字が含まれているかを確認し、その結果を4つの変数に保存しています。
// 英大文字・英小文字・数字・記号の有無を確認
const hasUpperCase = /[A-Z]/.test(password);
const hasLowerCase = /[a-z]/.test(password);
const hasNumber = /[0-9]/.test(password);
const hasSymbol = /[^A-Za-z0-9]/.test(password);
/[A-Z]/は英大文字、/[a-z]/は英小文字、/[0-9]/は数字が含まれているかを確認します。/[^A-Za-z0-9]/は英大文字・英小文字・数字以外の文字が含まれているかを確認する条件です。
それぞれのtest()は、条件に一致する文字が含まれていればtrue、含まれていなければfalseを返します。
なお、今回のhasSymbolは英数字以外の文字を判定するため、日本語や空白なども記号の条件に一致します。特定の記号だけを対象にしたい場合は、この正規表現を変更する必要があります。
パスワード強度を4段階で判定する方法
script.jsのcheckPasswordStrength()関数では、入力された文字列を次の条件で判定しています。
「弱い」は8文字未満、「普通」は8文字以上で上位の条件を満たさない場合、「強い」は8文字以上で英大文字・英小文字・数字をすべて含む場合、「とても強い」はさらに英数字以外の文字を含む場合です。
まず、未入力の場合は案内文を表示し、8文字未満の場合は「弱い」と判定します。
// 未入力の場合
if (password === "") {
strengthResult.textContent = "パスワードを入力してください。";
return;
}
// 8文字未満の場合は「弱い」と判定
if (password.length < 8) {
strengthResult.textContent = "弱い";
strengthResult.classList.add("is-weak");
return;
}
password.lengthは入力された文字列の長さを取得します。password.length < 8の8を10に変更すると、10文字未満を「弱い」と判定できます。
続いて、英大文字・英小文字・数字・記号の組み合わせを確認します。
// 8文字以上で英大文字・英小文字・数字・記号を含む場合
if (hasUpperCase && hasLowerCase && hasNumber && hasSymbol) {
strengthResult.textContent = "とても強い";
strengthResult.classList.add("is-very-strong");
return;
}
// 8文字以上で英大文字・英小文字・数字を含む場合
if (hasUpperCase && hasLowerCase && hasNumber) {
strengthResult.textContent = "強い";
strengthResult.classList.add("is-strong");
return;
}
// その他の8文字以上の場合は「普通」と判定
strengthResult.textContent = "普通";
strengthResult.classList.add("is-normal");
&&は、指定した条件がすべて成立しているかを確認する演算子です。「とても強い」の条件を先に判定することで、英大文字・英小文字・数字・記号をすべて含むパスワードが「強い」で判定を終了しないようにしています。
「とても強い」と「強い」のどちらにも該当しない8文字以上のパスワードは「普通」になります。
最低文字数を変更する場合は、先ほどのpassword.length < 8を変更してください。上位の判定条件にもこの文字数制限が適用されます。
また、index.htmlの「判定基準」に表示している「8文字以上」「8文字未満」は説明用の文字列です。JavaScriptの条件を変更した場合は、こちらの表示も同じ基準に書き換えてください。
判定結果の文字色を切り替える方法
強度の判定結果は、strengthResult.textContentで文字を書き換え、classList.add()で強度に対応するCSSクラスを追加しています。
新しい判定を行う前には、次の処理で前回のクラスを解除しています。
// 前回の判定結果を解除
strengthResult.classList.remove(
"is-weak",
"is-normal",
"is-strong",
"is-very-strong"
);
この処理によって、入力内容が変わっても前回の判定色が残らないようにしています。
文字色はstyle.cssで設定しており、「弱い」は赤色、「普通」はオレンジ色、「強い」は青色、「とても強い」は緑色です。
/* 弱い：赤色 */
.member-registration-password-strength-check_result.is-weak {
color: #dc2626; /* 強度が弱い場合の文字色 */
}
/* 普通：オレンジ色 */
.member-registration-password-strength-check_result.is-normal {
color: #d97706; /* 強度が普通の場合の文字色 */
}
/* 強い：青色 */
.member-registration-password-strength-check_result.is-strong {
color: #2563eb; /* 強度が強い場合の文字色 */
}
/* とても強い：緑色 */
.member-registration-password-strength-check_result.is-very-strong {
color: #16a34a; /* 強度がとても強い場合の文字色 */
}
判定結果の色を変更したい場合は、それぞれのcolorに指定されているカラーコードを書き換えてください。例えば「弱い」を濃い赤色にしたい場合は、#dc2626を別の赤系カラーコードに変更します。
判定結果の文字サイズは.member-registration-password-strength-check_resultのfont-size: 14px;で調整できます。
入力内容をリアルタイムで判定する仕組み
パスワードを入力・削除するたびに強度を更新するため、inputイベントを使用しています。addEventListener()で入力欄にイベントを登録し、値が変更されるたびにcheckPasswordStrength()を実行しています。
// 入力内容が変わるたびに判定結果を更新
passwordInput.addEventListener("input", checkPasswordStrength);
// ページを開いたときに初期状態を反映
checkPasswordStrength();
inputイベントは、文字の入力や削除によって入力欄の値が変更されたときに発生します。そのため、判定ボタンを押さなくても入力内容に応じて強度が切り替わります。
最後のcheckPasswordStrength();は、ページを開いたときに初期状態を反映する処理です。入力欄が空の場合は「パスワードを入力してください。」と表示されます。
フォームの横幅と余白を調整する方法
フォーム全体の横幅や余白は、style.cssの.member-registration-password-strength-check_wrapで設定しています。
/* =========================================
会員登録フォーム全体
========================================= */
.member-registration-password-strength-check_wrap {
width: 100%; /* 親要素の横幅に合わせる */
max-width: 520px; /* 最大横幅。大きくするとフォームが横に広がる */
margin: 40px auto; /* 上下40pxの余白。左右は自動調整して中央に配置する */
padding: 32px; /* 内側の余白。大きくすると内容と枠線の間隔が広がる */
border: 1px solid #e5e7eb; /* 外枠。1pxを大きくすると線が太くなる */
border-radius: 18px; /* 角丸。大きくすると丸みが強くなる */
background: #f8fafc; /* フォーム全体の背景色 */
box-sizing: border-box; /* 余白と枠線を横幅に含める */
font-family: sans-serif; /* フォーム全体のフォント */
}
max-width: 520px;はフォーム全体の最大横幅です。600pxに変更すると横に広がり、440pxにするとコンパクトになります。
padding: 32px;はフォーム内側の余白です。40pxにすると内容と外枠の間隔が広がり、24pxにすると狭くなります。
背景色はbackground: #f8fafc;、角丸はborder-radius: 18px;で変更できます。
レスポンシブ対応
style.cssでは、フォーム全体にwidth: 100%;とmax-width: 520px;を設定しています。これにより、広い画面では最大520pxまで表示し、狭い画面では親要素の横幅に合わせて縮小します。
さらに、画面幅が640px以下の場合は、フォーム内側の余白を小さくしています。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下ではフォームの内側余白を小さくする */
.member-registration-password-strength-check_wrap {
padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
}
}
PCではフォーム内側の余白を上下左右32pxに設定していますが、画面幅640px以下では上下24px・左右18pxに変更しています。
スマートフォンでさらに余白を小さくしたい場合は、メディアクエリ内のpaddingを調整してください。判定基準の文章が長くなる場合は、PCとスマートフォンの両方で折り返しや表示幅を確認してください。
コメント