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
```

## パスワードチェック
確認ボタンをクリックで正規表現によるチェックが入る

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWXyYgL" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/NWXyYgL">
  Untitled</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```html: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: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回入力させて一致しているかのチェックを追加した。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNpEqZz" data-user="ushi_osushi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ushi_osushi/pen/oNpEqZz">
  Untitled</a> by ushi_osushi (<a href="https://codepen.io/ushi_osushi">@ushi_osushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```html: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: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';
});
```