JavaScriptで正規表現を使った郵便番号検証ガイド！初心者でもわかる書き方と例

1. 正規表現とは何か？

1. 正規表現とは何か？

正規表現（せいきひょうげん）は、文字列のパターンを指定して、そのパターンに一致するかをチェックしたり、文字列を置き換えたりするための特別な書き方です。JavaScriptでは/パターン/のように書きます。例えば、「数字だけで構成されているか」を確認することができます。

2. 日本の郵便番号の基本形式

2. 日本の郵便番号の基本形式

日本の郵便番号は、基本的に「3桁-4桁」の形式です。例えば、100-0001のように書きます。この形式をJavaScriptでチェックするためには、正規表現を作る必要があります。

3. JavaScriptで簡単な郵便番号チェック

3. JavaScriptで簡単な郵便番号チェック

まずは、ハイフン付きの郵便番号を簡単に確認する方法です。

const zip = "100-0001";
const pattern = /^\d{3}-\d{4}$/;

if (pattern.test(zip)) {
  console.log("正しい郵便番号です。");
} else {
  console.log("郵便番号の形式が間違っています。");
}

ここで使っている^\d{3}-\d{4}$は、先頭から3桁の数字、ハイフン、後ろに4桁の数字があることを意味しています。

4. ハイフンなしの郵便番号にも対応する方法

4. ハイフンなしの郵便番号にも対応する方法

最近は、ハイフンなしで郵便番号を書くケースもあります。両方に対応するには次のようにします。

const zip2 = "1000001";
const pattern2 = /^\d{3}-?\d{4}$/;

if (pattern2.test(zip2)) {
  console.log("正しい郵便番号です。");
} else {
  console.log("郵便番号の形式が間違っています。");
}

正規表現の-?は、ハイフンがあってもなくても良いことを意味しています。

5. 入力値の前後に余分なスペースがあっても対応する方法

5. 入力値の前後に余分なスペースがあっても対応する方法

ユーザーが入力するときに、前後に空白を入れることがあります。その場合でも正しくチェックする方法を紹介します。

const zip3 = " 100-0001 ";
const pattern3 = /^\s*\d{3}-\d{4}\s*$/;

if (pattern3.test(zip3)) {
  console.log("正しい郵便番号です（空白を除いてチェック）。");
} else {
  console.log("郵便番号の形式が間違っています。");
}

\s*は空白が0個以上あることを意味しており、前後の空白を無視して検証できます。

6. フォーム入力と正規表現を組み合わせる

6. フォーム入力と正規表現を組み合わせる

実際のウェブページでは、フォームで郵便番号を入力してもらい、JavaScriptで検証することが多いです。例を見てみましょう。

<input type="text" id="zipInput" placeholder="郵便番号を入力">
<button id="checkBtn">チェック</button>
<p id="result"></p>

<script>
document.getElementById("checkBtn").addEventListener("click", function() {
  const zip = document.getElementById("zipInput").value;
  const pattern = /^\d{3}-?\d{4}$/;
  const result = document.getElementById("result");

  if (pattern.test(zip)) {
    result.textContent = "正しい郵便番号です。";
  } else {
    result.textContent = "郵便番号の形式が間違っています。";
  }
});
</script>

このようにボタンを押したときに郵便番号をチェックすることができます。

7. 正規表現で複数の形式をまとめてチェック

7. 正規表現で複数の形式をまとめてチェック

さらに、都道府県ごとの特定の郵便番号範囲に対応したチェックも可能です。例えば100-0000から199-9999までを簡易的にチェックする方法です。

const zip4 = "150-0042";
const pattern4 = /^1\d{2}-\d{4}$/;

if (pattern4.test(zip4)) {
  console.log("東京都内の郵便番号として正しい形式です。");
} else {
  console.log("東京都内の郵便番号として正しい形式ではありません。");
}

ここでは、先頭が1で始まる3桁の数字のみをチェックしています。

8. まとめると正規表現のポイント

8. まとめると正規表現のポイント

JavaScriptで郵便番号を正しく検証するためには、正規表現を理解することが大切です。\dは数字、{3}は3回繰り返す、-?はハイフンがあってもなくても良い、\s*は空白を無視する、といった基本を押さえておくと便利です。正規表現を使えば、ユーザーの入力ミスを減らし、フォームの精度を高めることができます。

まとめ

まとめ

本記事では、JavaScriptを使った郵便番号の検証方法について、初心者でも理解できるように具体的なコード例と共に解説しました。まず、正規表現とは何かを理解し、数字の繰り返しやハイフンの有無、空白の無視など、郵便番号検証に必要なパターンを作る方法を学びました。日本の郵便番号は基本的に「3桁-4桁」の形式であることを前提に、ハイフンあり・なし両方に対応する正規表現の作り方を紹介し、入力値の前後に余分なスペースがあっても正しく判定できる方法を説明しました。さらに、フォーム入力との組み合わせによる動的なチェック方法や、東京都内など特定の範囲に限定した郵便番号の検証方法も紹介しました。これにより、JavaScriptで郵便番号を検証する際に注意すべきポイントや、正規表現を活用するメリットを包括的に理解できるようになっています。

ポイントまとめ

• 正規表現は文字列のパターンを判定・検索・置換するために使う
• 日本の郵便番号は「3桁-4桁」が基本形式
• ^\d{3}-\d{4}$で基本形式の検証が可能
• -?でハイフンの有無に対応
• \s*で入力前後の空白を無視してチェックできる
• フォームの入力値を取得し、正規表現で動的に判定できる
• 特定の範囲や条件に応じた正規表現を作ることでさらに精密なチェックが可能

サンプルプログラムまとめ

const zipExamples = ["100-0001", "1000001", " 100-0001 ", "150-0042"];
const patterns = [
  /^\d{3}-\d{4}$/,
  /^\d{3}-?\d{4}$/,
  /^\s*\d{3}-\d{4}\s*$/,
  /^1\d{2}-\d{4}$/
];

zipExamples.forEach((zip, index) => {
  if (patterns[index].test(zip)) {
    console.log(zip + " は正しい形式です。");
  } else {
    console.log(zip + " は形式が間違っています。");
  }
});

100-0001 は正しい形式です。
1000001 は正しい形式です。
 100-0001 は正しい形式です。
150-0042 は正しい形式です。

このように複数のケースをまとめてチェックすることもできます。正規表現を使いこなすことで、郵便番号の形式を簡単に判定でき、ユーザーの入力ミスを防ぐことが可能です。