JavaScriptで作る入力フォームのバリデーションチェック パスワード・メールアドレス

パスワード・メールアドレスのバリデーションチェックで使用する正規表現と、実装コードのサンプル

正規表現

パスワード

・半角数字、半角英字のみ
・半角数字、半角英字がそれぞれ一文字以上使用されている
・文字数が8~16字以内

/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/

メールアドレス

・半角英小文字、半角数字、「-」(ハイフン)、「.」(ドット)、「_」(アンダーバー)のみ
・一文字目はアルファベットのみ
・「.」(ドット)は、連続使用・@の前の使用は不可

/^[a-z]+[a-z0-9_-]+@[a-z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i

パスワードチェック

確認ボタンをクリックで正規表現によるチェックが入る

See the Pen Untitled by ushi_osushi (@ushi_osushi) on CodePen.

HTML

<div class="content">
  <p>パスワードを入力してください</p>
  <input class="content__form" type="password" />

  <button class="content__button">確認</button>
  <p class="error__text" style="display: none">入力された値が正しくありません</p>
</div>

JavaScript

const confirm_button = document.getElementsByClassName('content__button')[0];

// 確認ボタンクリック時の処理
confirm_button.addEventListener('click', () => {
  /*
  正規表現条件
  ・半角数字、半角英字のみ
  ・半角数字、半角英字がそれぞれ一文字以上使用されている
  ・文字数が8~16字以内
  */
  const password_regex = /^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/;
  const password_value = document.getElementsByClassName('content__form')[0].value;
  // formのvalueを正規表現でチェック
  const password_value_checked_result = password_regex.test(password_value);
  const error_text = document.getElementsByClassName('error__text')[0];

  // チェック結果でエラー文言を出し分け
  password_value_checked_result
    ? error_text.style.display = 'none'
    : error_text.style.display = 'block';
});

メールアドレスチェック

確認ボタンをクリックから、inputからフォーカスを外したら正規表現によるチェックが入るように変更した。
確認のためメールアドレスを2回入力させて一致しているかのチェックを追加した。

See the Pen Untitled by ushi_osushi (@ushi_osushi) on CodePen.

HTML

<div class="content">
  <p>メールアドレスを入力してください</p>
  <input class="content__mail" type="text" />

  <p>確認の為、再度メールアドレスを入力してください</p>
  <input class="content__confirm" type="text" />

  <button class="content__button">確認</button>
  <p class="error__text" style="display: none">
    入力された値が正しくありません
  </p>
  <p class="error__text--confirm" style="display: none">
    入力された値が一致しません
  </p>
</div>

JavaScript

const form_mail = document.getElementsByClassName('content__mail')[0];
const confirm_button = document.getElementsByClassName('content__button')[0];

// 入力フォームからフォーカスが外れた時の処理
form_mail.addEventListener('blur', () => {
  /*
  正規表現条件
  ・半角英小文字、半角数字、「-」(ハイフン)、「.」(ドット)、「_」(アンダーバー)のみ
  ・一文字目はアルファベットのみ
  ・「.」(ドット)は、連続使用・@の前の使用は不可
  */
  const mail_regex = /^[a-z]+[a-z0-9_-]+@[a-z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i;
  const mail_value = document.getElementsByClassName('content__mail')[0].value;
  // formのvalueを正規表現でチェック
  const mail_value_checked_result = mail_regex.test(mail_value);
  const error_text = document.getElementsByClassName('error__text')[0];

  // チェック結果でエラー文言を出し分け
  mail_value_checked_result
    ? error_text.style.display = 'none'
    : error_text.style.display = 'block';
});

// 確認ボタンクリック時の処理
confirm_button.addEventListener('click', () => {
  // 入力されたメールアドレスが一致しているかチェック
  const mail_value_diff_checked =
    document.getElementsByClassName('content__mail')[0].value ===
    document.getElementsByClassName('content__confirm')[0].value;
  const error_text_confirm = document.getElementsByClassName('error__text--confirm')[0];

  // チェック結果でエラー文言を出し分け
  mail_value_diff_checked
    ? error_text_confirm.style.display = 'none'
    : error_text_confirm.style.display = 'block';
});