パスワードと確認用パスワードが一致しているかを、入力中にリアルタイムでチェックする方法を紹介します。2つの入力欄に文字を入力すると、その内容が自動的に比較され、一致しているかどうかがメッセージで表示されます。
2つのパスワードが異なる場合は赤色で「パスワードが一致していません。」、同じ場合は緑色で「パスワードが一致しています。」と表示されます。どちらかの入力欄が空の場合は「パスワードを入力してください。」に切り替わり、入力内容を変更するたびに判定結果が更新されます。
パスワードと確認用パスワードは、どちらも入力した文字が伏せ字になるパスワード入力欄を使用しています。デモでは、それぞれの入力内容を変数として取得し、取得結果に表示することで、伏せ字になっている文字列を確認できます。実際のパスワードは入力せず、テスト用の文字列でお試しください。
2つの入力値を比較することで、パスワードの入力間違いを検出できます。JavaScriptによる値の取得方法や、一致・不一致を判定する仕組みについては、下記の「ファイル構成と設置方法」で説明します。
デモ
2回入力したパスワードが一致しているかチェックします。
パスワードを入力してください。
password = "";
confirm = "";
string（文字列）
2つの入力欄に文字を入力すると、一致・不一致の判定と変数の内容がリアルタイムで更新されます。このデモではパスワードマネージャーの反応を抑えるため、通常のテキスト入力欄を疑似的に伏せ字表示しています。ブラウザによっては入力文字が表示される場合があります。取得結果にも入力文字が表示されるため、実際のパスワードは入力せず、テスト用の文字列でお試しください。
コードをコピーして使おう！
<!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="password-match-check_wrap">
<!-- パスワードと確認用パスワードの入力欄 -->
<div class="password-match-check_fields">
<div class="password-match-check_field">
<label class="password-match-check_label" for="password-match-check-password">パスワード</label>
<input class="password-match-check_input" type="password" id="password-match-check-password" name="password" placeholder="パスワードを入力" autocomplete="new-password">
</div>
<div class="password-match-check_field">
<label class="password-match-check_label" for="password-match-check-confirm">確認用パスワード</label>
<input class="password-match-check_input" type="password" id="password-match-check-confirm" name="confirm_password" placeholder="もう一度入力" autocomplete="new-password" aria-describedby="password-match-check-message">
</div>
</div>
<!-- 一致・不一致の判定結果を表示 -->
<p class="password-match-check_message" id="password-match-check-message" aria-live="polite">パスワードを入力してください。</p>
</div>
<!-- パスワードの一致判定を行うJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLではパスワードと確認用パスワードの入力欄、判定メッセージを配置しています。CSSでは入力欄の外観と判定結果に応じた文字色を設定し、JavaScriptでは2つの入力値を比較して、一致・不一致のメッセージをリアルタイムで切り替えています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、2つのinput type="password"要素と、それぞれの項目名を示すlabel要素、判定結果を表示するp要素を記述しています。style.cssでは、入力欄の横幅・余白・枠線・フォーカス時の表示と、判定メッセージの文字色を設定しています。script.jsでは、2つの入力値を取得し、空欄・不一致・一致の3つの状態に応じて表示を更新しています。
設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと、2つのパスワード入力欄が表示されます。
最初の入力欄にパスワードを入力し、確認用パスワードにも同じ文字列を入力してください。2つの文字列が異なる場合は赤色で不一致のメッセージが表示され、同じ場合は緑色で一致のメッセージが表示されます。どちらかの入力欄を空にすると、入力を促すメッセージに戻ります。
2つのパスワード入力欄を取得する方法
script.jsでは、document.querySelector()を使用して、パスワードと確認用パスワードの入力欄を取得しています。
今回のHTMLでは、最初の入力欄にid="password-match-check-password"、確認用の入力欄にid="password-match-check-confirm"を設定しています。
// パスワードの入力欄を取得
const passwordMatchCheckPassword = document.querySelector("#password-match-check-password");
// 確認用パスワードの入力欄を取得
const passwordMatchCheckConfirm = document.querySelector("#password-match-check-confirm");
passwordMatchCheckPasswordには最初の入力欄の要素、passwordMatchCheckConfirmには確認用パスワードの入力欄の要素が入ります。HTML側のIDを変更する場合は、script.jsのquerySelector()に指定しているIDも同じ名前に変更してください。
パスワードと確認用パスワードの値を取得する仕組み
2つの入力欄に入力された文字列は、それぞれのvalueプロパティで取得できます。今回のscript.jsでは、passwordMatchCheck()関数内で入力値を取得し、変数passwordとconfirmへ代入しています。
// パスワードと確認用パスワードの入力値を取得
const password = passwordMatchCheckPassword.value;
const confirm = passwordMatchCheckConfirm.value;
passwordには最初の入力欄の文字列、confirmには確認用パスワードの文字列が入ります。どちらもデータ型はstring（文字列）で、入力欄が空の場合は空文字列""になります。
type="password"は入力した文字を伏せ字で表示するための指定であり、JavaScriptで取得する値は伏せ字ではなく、実際に入力された文字列です。
取得した値を別の処理にも利用したい場合は、passwordMatchCheck()関数内で変数passwordとconfirmを使用してください。今回のコードでは、この2つの変数を一致判定に使用しています。
パスワードの一致・不一致を判定する仕組み
script.jsでは、取得した2つの文字列を比較する前に、どちらかの入力欄が空欄になっていないかを確認しています。
判定には===と!==を使用し、入力値が空文字列かどうか、2つの文字列が異なるかどうかを順番に確認しています。
// 前回の判定結果に応じた文字色を解除
passwordMatchCheckMessage.classList.remove("is-error", "is-success");
// どちらかが空欄の場合は入力案内を表示
if (password === "" || confirm === "") {
passwordMatchCheckMessage.textContent = "パスワードを入力してください。";
return;
}
// 2つのパスワードが異なる場合は不一致を表示
if (password !== confirm) {
passwordMatchCheckMessage.textContent = "パスワードが一致していません。";
passwordMatchCheckMessage.classList.add("is-error");
return;
}
// 2つのパスワードが同じ場合は一致を表示
passwordMatchCheckMessage.textContent = "パスワードが一致しています。";
passwordMatchCheckMessage.classList.add("is-success");
最初のclassList.remove()では、前回の判定で追加されたis-errorとis-successを解除しています。これにより、判定結果が変わったときに以前の文字色が残らないようにしています。
password === "" || confirm === ""は、どちらか一方でも空欄の場合に成立する条件です。この場合は「パスワードを入力してください。」と表示し、returnで処理を終了します。
両方に文字が入力されている場合は、password !== confirmで文字列を比較します。異なる場合はis-errorを追加し、同じ場合はis-successを追加します。大文字と小文字も区別して比較されるため、例えば"Password"と"password"は一致しません。
判定メッセージを変更したい場合は、script.jsのtextContentに設定している文字列を書き換えてください。初期表示の文章も変更する場合は、index.htmlのpassword-match-check-messageに記述した文字列も合わせて変更してください。
判定結果の文字色を変更する方法
一致・不一致の文字色は、style.cssの.password-match-check_message.is-errorと.password-match-check_message.is-successで設定しています。JavaScriptが判定結果に応じたクラスを追加すると、そのクラスに指定した文字色が適用されます。
/* パスワードが一致しない場合 */
.password-match-check_message.is-error {
color: #dc2626; /* 不一致の場合は赤色で表示する */
}
/* パスワードが一致した場合 */
.password-match-check_message.is-success {
color: #16a34a; /* 一致した場合は緑色で表示する */
}
#dc2626は不一致の場合の赤色、#16a34aは一致した場合の緑色です。色を変更する場合は、それぞれのcolorに指定したカラーコードを書き換えてください。
どちらかの入力欄が空欄の場合は、これらのクラスが付かないため、.password-match-check_messageに設定した#4b5563の文字色で表示されます。
入力中に判定結果を更新する方法
パスワードの入力・削除に合わせて判定結果を更新するため、2つの入力欄にinputイベントを登録しています。入力内容が変更されるたびにpasswordMatchCheck()が実行され、現在の入力値を取得して判定し直します。
// パスワードの入力・削除に合わせて判定を更新
passwordMatchCheckPassword.addEventListener("input", passwordMatchCheck);
// 確認用パスワードの入力・削除に合わせて判定を更新
passwordMatchCheckConfirm.addEventListener("input", passwordMatchCheck);
// ページを開いたときにも現在の入力状態を判定
passwordMatchCheck();
addEventListener("input", passwordMatchCheck)によって、どちらの入力欄を操作しても同じ判定処理が実行されます。最後のpasswordMatchCheck();は、ページを開いたときに一度判定処理を実行するための記述です。
このサンプルは2つの入力文字列が一致しているかを確認するもので、パスワードの文字数・強度の判定や、サーバーへの送信・保存は行いません。
レスポンシブ対応
style.cssでは、.password-match-check_wrapにwidth: 100%;とmax-width: 520px;を指定しています。広い画面では最大520pxの横幅で表示し、設置先の横幅が狭い場合は、その幅に合わせて縮小します。
margin: 40px auto;によってフォームを中央に配置し、上下に40pxの余白を設けています。フォーム全体の最大横幅を変更する場合はmax-width、枠線と入力欄の間隔を変更する場合はpadding: 32px;を調整してください。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下ではフォームの内側余白を小さくする */
.password-match-check_wrap {
padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
}
}
画面幅が640px以下になると、フォームの内側余白が上下左右32pxから、上下24px・左右18pxに切り替わります。スマートフォンでは左右の余白を小さくすることで、パスワード入力欄の表示幅を確保しています。
余白を調整したい場合は、メディアクエリ内のpaddingを変更してください。2つの入力欄はflex-direction: column;によって縦に並ぶため、PCとスマートフォンで配置は変わりません。
コメント