電話番号・メールアドレス・郵便番号の検証(JavaScript)

電話番号

日本国内での電話番号は0xx-xxx-xxxx(10桁)または0x0-xxxx-xxxx(11桁)のような形式です。これだけでも、下記のように表記パターンがたくさんあり、正規表現だけを使って、フォーム欄における全ての考えられる入力をカバーするのは難しいでしょう。

市外局番と市内局番と加入者番号を、ハイフンで区切ったり区切らなかったり ... 0xxxxxxxxx
市外局番または市内局番を、カッコで囲ったり囲わなかったり ... (0xx)xxx-xxxx
市外局番は1桁のところがあれば4桁のところもあったり ... 0xxxx-x-xxxx
国内プレフィックスを示す0を、付けたり省略したり ... xxx-xx-xxxx

確実に正しい形式の電話番号であると判定する必要がある場合は、Google製電話番号パーサーライブラリのLibphonenumber(使い方)を使いましょう。自力でパターンを網羅してテストをするよりも大分楽ですし、国際電話番号にも対応できます。

記号を除いた桁数を調べるだけの単純なアルゴリズムで良ければ、下のコードを自由にお使いください。

// 国内プレフィックスは省略しない想定
// - ( ) の記号がどれだけ適当に沢山あっても電話番号扱いになるので注意
telInputElem.addEventListener('change', function (e) {
    const telDelimiter = /-|\(|\)/g;
    const telPattern = /^[0-9]{10,11}$/;
    const value = e.target.value.replace(telDelimiter, '');
    const isVaild = telPattern.test(value);
    vaildResultElem.textContent = isVaild ? '' : '電話番号を入力してください。';
});

メールアドレス

メールアドレスの入力検証は、HTML5の機能を使って驚くほど簡単にできます。

<input type="email">

これだけです。ブラウザが内部的に次のような正規表現で検証しています。

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

郵便番号

1998年2月2日から日本の郵便番号は7桁と決まっているので、ハイフンの有無に気を付けるのみです。

/^\d{3}-?\d{4}$/

参考リンク