White Space
WebLife

Javascript で 郵便番号チェック（ハイフンありなし対応）

  • Javascript
  • jQuery

インプットの値が郵便番号かどうか、Javascript の正規表現で判定する方法です。jQuery を使用します。本来はライブラリ等を使用した方が良いですが、サイトによっては難しい場合もあるのでミニマムな実装をしたい時にご活用ください。

特定文字数だけで郵便番号と見なす

[半角数字3文字] + ハイフン(ありなし) + [半角数字4文字] の組み合わせを全て郵便番号とみなします。サンプルでは「正しい・間違い」のテキストを出力させています。

コード

name="zipcode"のインプットに対して実行します。HTMLに応じて任意のセレクタに変更してください。

 /**
 *  7桁のハイフンありなしの郵便番号チェック
 *  ***-****の形式かどうか判定
 *  @param {string} postcode 郵便番号
 *  @return {boolean}
 */
function is_postcode( postcode ) {
    if ( postcode.match(/^\d{3}-?\d{4}$/) ) {
        return true;
    } else {
        return false;
    }
} 

// 処理
$('input[name="zipcode"]').on('paste change', function(){
    if ( is_postcode( $(this).val() ) ) {
        // 正しい郵便番号の時
    } else {
        // 正しい郵便番号ではない時
    }
});

注意点

  • 実際にその郵便番号が存在するかまではチェックできません。
  • 全角文字が入ることを想定していません。もし全角数字も判定に含めたい場合は、/^\d{3}-?\d{4}$/を/^[0-9０-９]{3}-?[0-9０-９]{4}$/に変更してください。送信されるフォーマットにバラつきが生まれるので、あまりおすすめはしません。

半角数字以外を削除し、7桁の数字であれば郵便番号と見なす

先ほどとは違い、半角数字以外は削除するので、半角数字のみにフォーマットを整えます。サンプルでは「正しい・間違い」のテキストを出力させています。

コード

name="zipcode"のインプットに対して実行します。HTMLに応じて任意のセレクタに変更してください。 

$('input[name="zipcode"]').on('paste change', function(){

    // 郵便番号
    let val = $(this).val();

    // 半角数字以外を削除
    val = val.replace(/[^\d]+/g, '');
    $(this).val( val );

    // 郵便番号チェック
    if ( val.match(/^\d{7}$/) ) {
      // 正しい郵便番号の時
    } else {
      // 正しくない郵便番号の時
    }

});

注意点

  • 郵便番号存在チェックは行いません。

さいごに

郵便番号存在チェックを行うには、ajaxzip3などのライブラリを使用してください。住所自動反映なども行えて便利です（下記参考）。

【ajaxzip3】郵便番号を入力すると住所が自動入力されるライブラリ

もしもPHPなどのバックエンド側でも同じように郵便番号判定・フォーマット整形等をなどを行う場合は、Javascript で判定用コードなどを書くのは二度手間になってしまいます。バックエンドAPIを作成して、Ajax でのチェックを行うと良いです。