フォームを作っていると、かなりの確率で止まるのが「電話番号のバリデーション」です。
お問い合わせフォームを公開したあとに、「090-1234-5678 は通るのに 03-1234-5678 が弾かれる」「ハイフンなしだと登録できない」と言われて、提出直前に慌てて修正した経験がある人もいるかもしれません。
しかも電話番号は、郵便番号より厄介です。
携帯・固定電話・IP電話・フリーダイヤルで桁数が違いますし、ハイフンあり／なし問題もあります。さらに、全角入力まで混ざると、単純な正規表現ではほぼ事故ります。
この記事では、電話番号の正規表現について「結局どれを使えばいいのか」を実務レベルで整理します。
サンプルコードだけで終わらず、ハイフンあり・なしの考え方、JavaScriptやPHPでの実装、実際に起きやすい失敗まで踏み込んで解説していきます。
電話番号の正規表現とは?入力チェックで使われる仕組み
電話番号の正規表現とは、入力された文字列が「電話番号の形式になっているか」を判定するルールです。
たとえばフォームに「abc123」が入力された場合、それを弾くために使います。
ここで混乱しやすいのが、「正規表現＝電話番号を正確に判定するもの」と思われがちな点です。
実際には違います。正規表現で確認しているのは、あくまで“文字列のパターン”です。
たとえば、以下のような形式を許可するかどうかを決めます。
| 入力例 | 判定 |
|---|---|
| 090-1234-5678 | OK |
| 0312345678 | OK |
| aaa-bbbb-cccc | NG |
| 090123 | NG |
ここでありがちなのが、「完璧に電話番号を判定しよう」として複雑化するパターンです。
実務では、厳密にしすぎると逆に入力エラーが増えます。
正規表現の基本構造
電話番号の正規表現でよく使われるのがこちらです。
^\d{2,4}-\d{2,4}-\d{3,4}$これを分解すると以下の意味になります。
| 記号 | 意味 |
|---|---|
| ^ | 文字列の先頭 |
| \d | 数字 |
| {2,4} | 2〜4桁 |
| – | ハイフン |
| $ | 文字列の末尾 |
つまり、
「最初から最後まで、数字-数字-数字 の形で構成されているか」
をチェックしています。
ただ、これだけだと「00-00-0000」も通ります。
なので、実務では「形式確認」と割り切るケースが多いです。
なぜ電話番号だけ正規表現が難しいのか
メールアドレスより電話番号のほうが、実は設計が難しいです。
理由は、日本の電話番号ルールが統一されていないから。
たとえば以下があります。
| 種類 | 例 |
|---|---|
| 携帯電話 | 090-1234-5678 |
| 固定電話 | 03-1234-5678 |
| 地方固定電話 | 099-123-4567 |
| フリーダイヤル | 0120-123-456 |
| IP電話 | 050-1234-5678 |
ここを知らずに「090だけ許可」にしてしまうと、会社番号が入力できません。
BtoBフォームでこれをやると、問い合わせが減る原因になります。
電話番号の正規表現でハイフンありを許可する方法
まず最も多いのが、ハイフンあり入力です。
ユーザー側も見慣れているので、入力ストレスが少なくなります。
実務で一番よく使われるのは以下でしょう。
^\d{2,4}-\d{2,4}-\d{3,4}$この形なら、固定電話・携帯電話の多くに対応できます。
ハイフンありでよくある失敗
ここでかなり多いのが、「携帯電話しか通らない正規表現」です。
たとえばこれ。
^090-\d{4}-\d{4}$一見問題なさそうですが、実際はかなり危険です。
なぜなら、080や070を弾くから。
さらに、法人サイトでは03番号を入力するケースが多いです。
問い合わせフォーム公開後に、「電話番号が入力できません」と営業部から連絡が来る流れ、現場では本当にあります。
実務で使いやすいハイフンありパターン
実際には、以下くらいがちょうどいいです。
^(0\d{1,4}-\d{1,4}-\d{3,4})$このくらいなら、かなり幅広く対応できます。
ただし、ここで読者が迷いやすいのが「どこまで厳密にするべきか」です。
結論からいうと、問い合わせフォームは“厳密にしすぎない”ほうが成功しやすいです。
入力エラーが増えると、ユーザーは途中で離脱します。
特にスマホ入力時は、ハイフン位置が違うだけで送信できないとかなりストレスになります。
電話番号の正規表現でハイフンなしを許可する方法
最近は、ハイフンなし入力もかなり増えています。
スマホの自動入力機能が影響していますね。
たとえば、
09012345678この形式です。
これを許可するなら、以下のような正規表現が使えます。
^\d{10,11}$非常にシンプルです。
ハイフンなし入力で起きやすい問題
ここで意外と多いのが、「全角数字」です。
たとえば、
０９０１２３４５６７８これ、ユーザーは普通に入力しています。
特にPCが苦手な人は、全角になりやすい。
しかし正規表現だけだと弾かれます。
すると送信エラーになって、フォーム離脱につながるんですよ。
実務では入力前に整形する
なので、現場では「正規表現だけで解決しない」ことが多いです。
たとえばJavaScriptで事前変換します。
value = value.replace(/[０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 65248);
});これは全角数字を半角に変換する処理です。
フォーム改善では、この一手間だけでCV率が変わることがあります。
「入力ミスを防ぐ」ではなく、「入力ミスを吸収する」発想が重要です。
ハイフンあり・なし両方に対応する正規表現
実務ではこれが一番多いです。
ユーザーごとに入力癖が違うので、両対応にするケースですね。
使いやすいのはこちら。
^\d{2,4}-?\d{2,4}-?\d{3,4}$-? は「ハイフンがあってもなくてもOK」という意味です。
つまり以下が通ります。
| 入力 | 判定 |
|---|---|
| 090-1234-5678 | OK |
| 09012345678 | OK |
| 03-1234-5678 | OK |
なぜ両対応が実務向きなのか
フォームって、開発者が思っている以上に入力の揺れがあります。
営業担当は会社番号を入れる。
スマホユーザーはハイフンなし。
年配ユーザーは全角入力。
ここを「決められた形式だけ」にすると、離脱率が上がります。
JavaScriptで電話番号をバリデーションする方法
フロント側でのチェックなら、JavaScriptが定番です。
たとえば以下。
const regex = /^\d{2,4}-?\d{2,4}-?\d{3,4}$/;
if(regex.test(phoneNumber)) {
console.log("OK");
} else {
console.log("NG");
}JavaScriptだけに依存すると危険
ここで初心者がやりがちなのが、「JavaScriptでチェックしてるから安心」という考え方です。
実は危険です。
JavaScriptはブラウザ側なので、無効化できます。
つまり、不正入力を完全には防げません。
サーバー側でも必ずチェックする
なので、PHPやLaravel側でも必ず検証します。
たとえばPHPならこうです。
if (preg_match('/^\d{2,4}-?\d{2,4}-?\d{3,4}$/', $phone)) {
echo "OK";
} else {
echo "NG";
}現場では「フロントで利便性」「サーバーで安全性」という分担になります。
ここをJavaScriptだけで終わらせると、スパムや異常データがDBに入る原因になります。
Laravelで電話番号のバリデーションを実装する方法
Laravelでは regex バリデーションを使います。
'phone' => ['required', 'regex:/^\d{2,4}-?\d{2,4}-?\d{3,4}$/']これで基本対応できます。
Laravelで起きやすいエラー
かなり多いのが、バックスラッシュのエスケープミスです。
たとえば、
'regex:/^\d{2,4}$/'で動かないケース。
環境によっては、
'regex:/^\\d{2,4}$/'にする必要があります。
ここ、提出直前にエラーが出るとかなり焦ります。
フォームが送れなくなるので、実務では事前テストが必須です。
Laravelではカスタムメッセージも重要
エラーメッセージが不親切だと、ユーザーが離脱します。
NG例はこちら。
phone format invalidこれだと何を直せばいいかわかりません。
実務では、
電話番号はハイフンあり・なしどちらでも入力できますのように書きます。
ユーザーに“修正方法”を伝えると、入力完了率が上がります。
電話番号の正規表現でよくあるミスと修正方法
桁数を固定しすぎる
かなり多いです。
^\d{11}$これだと固定電話が弾かれます。
企業フォームでは危険です。
ハイフン位置を限定しすぎる
たとえば、
^\d{3}-\d{4}-\d{4}$これだと03番号が通りません。
「スマホ番号だけ想定していた」という事故ですね。
半角しか考慮していない
これは本当に多いです。
特に自治体サイトや年齢層高めのサービスだと、全角入力率が想像以上に高い。
「入力エラーが続いて離脱」というケース、実務では珍しくありません。
電話番号の入力チェックでCV率を落とさない考え方
ここ、SEOより大事かもしれません。
フォーム改善で重要なのは、「正しい入力」より「送信完了」です。
もちろん異常値は弾く必要があります。
でも、厳密すぎると普通のユーザーまで落ちます。
実務では“ゆるく受けて整形”が強い
最近のフォーム改善は、かなりこの方向です。
たとえば、
- ハイフンありなし両対応
- 全角自動変換
- 空白自動削除
- エラーメッセージを具体化
こういう細かい改善の積み重ねでCV率が変わります。
特にスマホフォームは、入力ストレスを減らすだけで成果が動きます。
入力ルールを押し付けない
ユーザーは、電話番号入力方法を覚えたいわけではありません。
問い合わせしたいだけです。
なのに、
ハイフンなしで入力してくださいと書いておきながら、実はハイフンありでも通るサイトがあります。
逆に、説明がなくてエラーになるサイトもある。
この“フォーム都合”が、離脱の原因になります。
電話番号の正規表現で迷ったときのおすすめパターン
実務なら、まずこれで十分です。
^\d{2,4}-?\d{2,4}-?\d{3,4}$理由はシンプルで、日本の電話番号パターンをかなり広く吸収できるから。
さらにおすすめなのが、入力時に整形することです。
たとえば、
- 全角→半角変換
- 空白除去
- ハイフン自動整形
ここまでやると、フォームの入力体験がかなり良くなります。
フォーム改善は、デザインより「入力ストレス削減」のほうが効く場面があります。
特に問い合わせフォームは、ユーザーが急いでいることが多い。
「あと一歩で送信なのにエラー」
この瞬間に離脱するケース、本当に多いんですよ。
まとめ
電話番号の正規表現は、単にコードを書く話ではありません。
実務では、「ユーザーがストレスなく送信できるか」が重要です。
特にありがちな失敗がこちらです。
| 失敗 | 影響 |
|---|---|
| 携帯番号しか通らない | 法人問い合わせ減少 |
| ハイフン必須 | スマホ入力離脱 |
| 全角未対応 | エラー増加 |
| JavaScriptのみ検証 | 不正データ混入 |
実務で迷ったら、まずは以下を基準にすると失敗しにくいです。
^\d{2,4}-?\d{2,4}-?\d{3,4}$そのうえで、
- ハイフンありなし両対応
- 全角変換
- わかりやすいエラーメッセージ
ここまで整えると、かなり使いやすいフォームになります。
「正しい入力を強制する」のではなく、「ユーザーが自然に送信できる」設計にすると、フォーム改善は一気に変わりますよ。
