会員登録フォームで2回入力したパスワードの一致チェックをする方法【HTML/CSS/JavaScript・サンプルコード付き】

フォーム

会員登録フォームで2回入力したパスワードの一致チェックをする方法

会員登録フォームでは、入力ミスを防ぐためにパスワードを2回入力させる仕組みがよく利用されます。本記事では、パスワードと確認用パスワードの入力内容を比較し、一致しているかどうかをリアルタイムで判定する方法を紹介します。HTML・CSS・JavaScriptだけで実装できるため、サーバー側の処理を用意しなくても動作確認できるのが特徴です。

このサンプルでは、1つ目のパスワード欄と確認用パスワード欄の内容を比較し、一致している場合は成功メッセージ、不一致の場合はエラーメッセージを表示できます。ユーザーが送信前に入力ミスへ気付けるため、会員登録フォームやアカウント作成フォームの使いやすさ向上にも役立ちます。

新規会員登録、パスワード再設定、アカウント発行フォームなど、パスワード入力が必要な場面で活用できます。シンプルな構成なので導入しやすく、デザインや判定メッセージも自由に変更できます。パスワード確認欄を実装したい方や、入力内容の一致チェックをJavaScriptで行いたい方にもおすすめのサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

会員登録フォーム

2回入力したパスワードが一致しているかチェックします。

パスワードを入力してください。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>パスワード一致チェックフォーム</title>

  <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="password-match-check-form_wrap">

    <div class="password-match-check-form_title">
      会員登録フォーム
    </div>

    <p class="password-match-check-form_text">
      2回入力したパスワードが一致しているかチェックします。
    </p>

    <div class="password-match-check-form_form">

      <div class="password-match-check-form_field">

        <label class="password-match-check-form_label" for="password-match-check-form-password">
          パスワード
        </label>

        <input
          class="password-match-check-form_input"
          type="text"
          id="password-match-check-form-password"
          placeholder="パスワードを入力"
        >

      </div>

      <div class="password-match-check-form_field">

        <label class="password-match-check-form_label" for="password-match-check-form-confirm">
          パスワード確認
        </label>

        <input
          class="password-match-check-form_input"
          type="text"
          id="password-match-check-form-confirm"
          placeholder="もう一度入力"
        >

      </div>

      <div class="password-match-check-form_message">
        パスワードを入力してください。
      </div>

    </div>

  </div>

  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。index.html、style.css、script.js を同じフォルダへ保存してください。 

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、パスワードと確認用パスワードの一致チェックを確認できます。2つの入力欄へパスワードを入力すると、一致している場合は成功メッセージ、不一致の場合はエラーメッセージがリアルタイムで表示されます。

判定メッセージを変更したい場合は、script.js 内のメッセージ内容を編集してください。また、入力欄のデザインやレイアウトは style.css を編集することで自由にカスタマイズできます。

コメント