パスワード・メールアドレスのバリデーションチェックで使用する正規表現と、実装コードのサンプル
正規表現
パスワード
・半角数字、半角英字のみ
・半角数字、半角英字がそれぞれ一文字以上使用されている
・文字数が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';
});