フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【バリデーション】郵便番号|フォームの入力形式チェックを実装する方法

JavaScript
jQuery
バリデーション
フォーム
入力形式チェック
郵便番号チェック

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

日本の郵便番号は、特定のフォーマットに基づいています。ウェブページやアプリケーションで、郵便番号の入力チェックを行う際、正規表現は非常に役立ちます。JavaScriptやjQueryを使って、この正規表現を実装する方法について興味がありますか?このブログでは、日本の郵便番号の正規表現に関する基本的な知識と、その実装方法について詳しく解説します。正確な郵便番号のフォーマットを確保することで、エラーを減少させ、ユーザー体験を向上させることができます。

郵便番号(7桁)の形式チェック

まず初めに、HTMLのコードを用意します。今回の入力形式チェックに使用するHTMLは全て以下の通りです。

<form id="myForm">
    <input type="text" id="myInput" required>
    <button type="submit">送信</button>
</form>
<div id="errorMessage" style="color: red;"></div>

JavaScript、jQueryそれぞれの実装方法を解説していきます。

JavaScriptで実装する方法

郵便番号(7桁)の正規表現の入力形式チェックをJavaScriptで実装する方法は以下になります。

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var input = document.getElementById('myInput').value;

    // 日本の郵便番号の正規表現(全角・半角、ハイフンあり・なし)
    var regex = /^(?:\d{3}-?\d{4}|[0-9]{3}-?[0-9]{4})$/;

    if (regex.test(input)) {
        document.getElementById('errorMessage').textContent = '';
        this.submit();
    } else {
        document.getElementById('errorMessage').textContent = '正しい郵便番号を入力してください。';
    }
});

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

①まず、document.getElementById('myForm')でHTML上のmyFormというIDを持った要素を取得します。このフォームに対して、submitイベントのリスナーを追加します。
②フォームが送信されると、アロー関数内のコードが実行されます。event.preventDefault();というコードで、フォームのデフォルトの送信動作(ページのリロードや遷移)をキャンセルします。
③次に、document.getElementById('myInput').valueを使って、myInputというIDを持った入力フィールドの値を取得します。この値は、変数inputに代入されます。
var regex = /^\d{3}-\d{4}$/;で、日本の郵便番号の形式に合致するかどうかをチェックするための正規表現パターンを定義します。この正規表現は、3つの数字、ハイフン、そして4つの数字の並びにマッチします。
if (regex.test(input))の条件文で、入力された郵便番号が正しい形式になっているかどうかをチェックします。もし正しい形式であれば、エラーメッセージを空にし、フォームを送信します。正しい形式でなければ、エラーメッセージを表示します。

jQueryで実装する方法

郵便番号(7桁)の正規表現の入力形式チェックをjQueryで実装する方法は以下になります。

$('#myForm').on('submit', function(event) {
    event.preventDefault();
    var input = $('#myInput').val();

    // 日本の郵便番号の正規表現(全角・半角、ハイフンあり・なし)
    var regex = /^(?:\d{3}-?\d{4}|[0-9]{3}-?[0-9]{4})$/;

    if (regex.test(input)) {
        $('#errorMessage').text('');
        this.submit();
    } else {
        $('#errorMessage').text('正しい郵便番号を入力してください。');
    }
});

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

①こちらはjQueryを使用して同じ動作を実現しています。$('#myForm')myFormというIDを持った要素を選択します。
.on('submit', function(event) {...}で、submitイベントのリスナーを追加します。このフォームが送信された時に、指定された関数が実行されます。
event.preventDefault();を再び使用して、フォームのデフォルトの送信動作をキャンセルします。
④jQueryの$('#myInput').val()を使って、入力フィールドの値を取得します。この値は、変数inputに代入されます。
⑤残りのコードは、JavaScriptと同じ動作を行います。入力された郵便番号が正規表現にマッチするかどうかをチェックし、エラーメッセージを表示するかフォームを送信するかの処理を行います。

その他のパターン

正規表現は非常に強力なツールであり、わずかな書き換えによって様々な文字列のパターンをチェックすることができます。具体的には、以下のコード部分が核心となります。

// 日本の郵便番号の正規表現(全角・半角、ハイフンあり・なし)
var regex = /^(?:\d{3}-?\d{4}|[0-9]{3}-?[0-9]{4})$/;

この正規表現は郵便番号(7桁)の形式チェックに対応していますが、範囲やパターンを調整することで、異なる条件のチェックにも応用することが可能です。JavaScript・jQueryを利用する際、この部分の正規表現を適切にカスタマイズすることで、幅広い文字列形式の検証に対応することが出来ます。

郵便番号(7桁/全角・半角/ハイフンあり・なし)

// 日本の郵便番号の正規表現(全角・半角、ハイフンあり・なし)
var regex = /^(?:\d{3}-?\d{4}|[0-9]{3}-?[0-9]{4})$/;

郵便番号(7桁/全角・半角/ハイフンあり)

// 全角・半角・ハイフンあり
var regex = /^(?:\d{3}-\d{4}|[0-9]{3}-[0-9]{4})$/;

郵便番号(7桁/全角・半角/ハイフンなし)

// 全角・半角・ハイフンなし
var regex = /^(?:\d{7}|[0-9]{7})$/;

郵便番号(7桁/全角/ハイフンあり・なし)

// 全角・ハイフンあり・なし
var regex = /^[0-9]{3}-?[0-9]{4}$/;

郵便番号(7桁/全角/ハイフンあり)

// 全角・ハイフンあり
var regex = /^[0-9]{3}-[0-9]{4}$/;

郵便番号(7桁/全角/ハイフンなし)

// 全角・ハイフンなし
var regex = /^[0-9]{7}$/;

郵便番号(7桁/半角/ハイフンあり・なし)

// 半角・ハイフンあり・なし
var regex = /^\d{3}-?\d{4}$/;

郵便番号(7桁/半角/ハイフンあり)

var regex = /^\d{3}-\d{4}$/;

郵便番号(7桁/半角/ハイフンなし)

var regex = /^\d{7}$/;

郵便番号(3桁+4桁)の形式チェック

3桁+4桁の郵便番号の形式チェックを実装するためのHTMLのコードも別途用意します。3桁+4桁の郵便番号の入力形式チェックに使用するHTMLは全て以下の通りです。

HTML

<form id="myForm">
    <input type="text" id="myInput1" maxlength="3" required>
    <input type="text" id="myInput2" maxlength="4" required>
    <button type="submit">送信</button>
</form>
<div id="errorMessage" style="color: red;"></div>

JavaScript、jQueryそれぞれの実装方法を解説していきます。

JavaScriptで実装する方法

郵便番号(3桁+4桁)の正規表現の入力形式チェックをJavaScriptで実装する方法は以下になります。

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    var input1 = document.getElementById('myInput1').value;
    var input2 = document.getElementById('myInput2').value;

    // 日本の郵便番号の正規表現
    var regex1 = /^(\d{3}|[0-9]{3})$/;
    var regex2 = /^(\d{4}|[0-9]{4})$/;

    if (regex1.test(input1) && regex2.test(input2)) {
        document.getElementById('errorMessage').textContent = '';
        this.submit();
    } else {
        document.getElementById('errorMessage').textContent = '正しい郵便番号を入力してください。';
    }
});

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

document.getElementById('myForm')を使って、HTML上のmyFormというIDを持った要素(この場合はフォーム)を取得します。このフォームに対して、submitイベントのリスナーを追加しています。
②フォームが送信されると、指定したアロー関数内のコードが実行されます。event.preventDefault();で、フォームのデフォルトの送信動作をキャンセルします。
document.getElementById('myInput1').valuedocument.getElementById('myInput2').valueを使って、それぞれmyInput1myInput2というIDを持った入力フィールドからの値を取得します。取得した値は、変数input1input2にそれぞれ代入されます。
④郵便番号の形式を確認するための正規表現が2つ定義されています。var regex1は3桁の数字(全角または半角)にマッチし、var regex2は4桁の数字(全角または半角)にマッチします。
if (regex1.test(input1) && regex2.test(input2))の条件文で、入力された郵便番号が正しい形式になっているかどうかをチェックします。両方の入力フィールドの値が正規表現にマッチすれば、エラーメッセージを空にし、フォームを送信します。マッチしなければ、エラーメッセージを表示します。

jQueryで実装する方法

郵便番号(3桁+4桁)の正規表現の入力形式チェックをjQueryで実装する方法は以下になります。

$('#myForm').on('submit', function(event) {
    event.preventDefault();
    
    var input1 = $('#myInput1').val();
    var input2 = $('#myInput2').val();

    // 日本の郵便番号の正規表現
    var regex1 = /^\d{3}$/;
    var regex2 = /^\d{4}$/;

    if (regex1.test(input1) && regex2.test(input2)) {
        $('#errorMessage').text('');
        this.submit();
    } else {
        $('#errorMessage').text('正しい郵便番号を入力してください。');
    }
});

実装サンプル

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

①こちらはjQueryを使用して同じ動作を実現しています。$('#myForm')myFormというIDを持った要素を選択します。
.on('submit', function(event) {...}で、submitイベントのリスナーを追加します。このフォームが送信されると、指定された関数が実行されます。
event.preventDefault();を再び使用して、フォームのデフォルトの送信動作をキャンセルします。
④jQueryの$('#myInput1').val()$('#myInput2').val()を使用して、2つの入力フィールドからの値を取得します。これらの値は、変数input1input2にそれぞれ代入されます。
⑤残りのコードは、最初のコードブロックと同じ動作を行います。2つの入力フィールドの値が正規表現にマッチするかどうかをチェックし、エラーメッセージを表示するかフォームを送信するかの処理を行います。

その他のパターン

3桁+4桁の郵便番号の形式チェックの場合も7桁の郵便番号同様に様々なパターンの形式に対応することが出来ます。

郵便番号(3桁+4桁/全角・半角)

// 3桁の部分: 全角・半角
var regex1 = /^(\d{3}|[0-9]{3})$/;

// 4桁の部分: 全角・半角
var regex2 = /^(\d{4}|[0-9]{4})$/;

郵便番号(3桁+4桁/全角)

// 3桁の部分: 全角
var regex1 = /^[0-9]{3}$/;

// 4桁の部分: 全角
var regex2 = /^[0-9]{4}$/;

郵便番号(3桁+4桁/半角)

// 3桁の部分: 半角
var regex1 = /^\d{3}$/;

// 4桁の部分: 半角
var regex2 = /^\d{4}$/;

その他のバリデーションチェック

郵便番号に関するその他の記事

まとめ

このブログで、日本の郵便番号の正規表現の基本をJavaScriptとjQueryを用いてそれぞれ解説しました。正規表現を用いることで、郵便番号の入力チェックを効率的に行い、エラーの可能性を低減することができます。正確な入力チェックは、ユーザーの信頼を得る上で不可欠な要素だと思います。作成するサイトやアプリケーションには確実かつ正確に組み込みたいプログラムのひとつですね。