【バリデーション】電話番号｜フォームの入力形式チェックを実装する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
ウェブフォームの中で、ユーザーが入力する情報を正確かつ効果的に検証することは極めて重要です。特に、電話番号のような特定のフォーマットを必要とする情報の場合、正確な形式が求められることが多いです。この記事では、JavaScriptとjQueryを使用して、電話番号の形式をどのようにチェックするかを解説します。
電話番号の形式チェック
まず初めに、HTMLのコードを用意します。今回の入力形式チェックに使用する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で実装する方法
電話番号の正規表現の入力形式チェックをJavaScriptで実装する方法は以下になります。
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var input = document.getElementById('myInput').value;
// 電話番号の正規表現（固定電話、携帯、フリーダイヤル、IP電話を考慮）
var regex = /^(0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}|0120[-]?\d{1,3}[-]?\d{4}|050[-]?\d{4}[-]?\d{4}|0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4})*$/;
if (regex.test(input)) {
document.getElementById('errorMessage').textContent = '';
this.submit();
} else {
document.getElementById('errorMessage').textContent = '有効な電話番号を入力してください。';
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
まず、myFormというIDを持つフォームのsubmitイベントへリスナーを追加します。
フォームが送信されるとき、event.preventDefault()を利用して、一時的に送信を中断します。
次に、getElementByIdメソッドでmyInputの入力値を取得します。
取得した入力値に対して、電話番号の正規表現(/^(0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}|0120[-]?\d{1,3}[-]?\d{4}|050[-]?\d{4}[-]?\d{4}|0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4})*$/)を適用して形式を確認します。
もし形式が正しければ、フォームを送信します。そうでなければ、 エラーメッセージを表示します。
jQueryで実装する方法
電話番号の正規表現の入力形式チェックをjQueryで実装する方法は以下になります。
$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();
// 日本の電話番号の正規表現 (固定電話、携帯、フリーダイヤル、IP電話を考慮)
var regex = /^(0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}|0120[-]?\d{1,3}[-]?\d{4}|050[-]?\d{4}[-]?\d{4}|0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4})*$/;
if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('有効な電話番号を入力してください。');
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
まず、myFormというIDを持つフォームのsubmitイベントへリスナーを追加します。
フォームが送信されるとき、event.preventDefault()を利用して、一時的に送信を中断します。
次に、getElementByIdメソッドでmyInputの入力値を取得します。
val()メソッドを利用して、ユーザーの入力値を取得します。
取得した値に対して、電話番号の正規表現(/^(0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}|0120[-]?\d{1,3}[-]?\d{4}|050[-]?\d{4}[-]?\d{4}|0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4})*$/)を適用し、形式をチェックします。
もし形式が正しければ、フォームを送信します。そうでなければ、エラーメッセージを表示します。
その他のパターン
正規表現は非常に強力なツールであり、わずかな書き換えによって様々な文字列のパターンをチェックすることができます。具体的には、以下のコード部分が核心となります。
// 電話番号の正規表現（固定電話、携帯、フリーダイヤル、IP電話）
var regex = /^(0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}|0120[-]?\d{1,3}[-]?\d{4}|050[-]?\d{4}[-]?\d{4}|0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4})*$/;
0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}は050から090までの接頭辞で始まる電話番号。ハイフンか括弧の想定も考慮しています。0120[-]?\d{1,3}[-]?\d{4}は0120で始まるフリーダイヤルの電話番号、050[-]?\d{4}[-]?\d{4}は050で始まる電話番号、最後の0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4}は一般的な日本の電話番号のパターンを想定した正規表現になっています。
この正規表現電話番号の正規表現（固定電話、携帯、フリーダイヤル、IP電話）の形式チェックに対応していますが、範囲やパターンを調整することで、異なる条件のチェックにも応用することが可能です。JavaScript・jQueryを利用する際、この部分の正規表現を適切にカスタマイズすることで、幅広い文字列形式の検証に対応することが出来ます。
固定電話、携帯電話 、フリーダイヤル、IP電話（ハイフンあり・なし）
var regex = /^(0[5-9]0[-(]?[0-9]{4}[-)]?[0-9]{4}|0120[-]?\d{1,3}[-]?\d{4}|050[-]?\d{4}[-]?\d{4}|0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4})*$/;
固定電話 、 携帯電話 、 IP電話（ハイフンあり・なし）
var regex = /^(0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4}|0[7-9]0[-]?\d{4}[-]?\d{4}|050[-]?\d{4}[-]?\d{4})*$/;
固定電話 、 携帯電話（ハイフンあり・なし）
var regex = /^(0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4}|0[7-9]0[-]?\d{4}[-]?\d{4})*$/;
固定電話（ハイフンあり・なし）
var regex = /^0[1-9][-]?\d{1,4}[-]?\d{1,4}[-]?\d{4}*$/;
携帯電話（ハイフンあり・なし）
var regex = /^0[7-9]0[-]?\d{4}[-]?\d{4}*$/;
IP電話（ハイフンあり・なし）
var regex = /^050[-]?\d{4}[-]?\d{4}*$/;
フリーダイヤル（ハイフンあり・なし）
var regex = /^0120[-]?\d{1,3}[-]?\d{4}*$/;
固定電話、携帯電話 、フリーダイヤル、IP電話（ハイフンあり）
var regex = /^(0[5-9]0-\d{4}-\d{4}|0120-\d{1,3}-\d{4}|050-\d{4}-\d{4}|0[1-9]-\d{1,4}-\d{1,4}-\d{4})$/;
固定電話 、 携帯電話 、 IP電話（ハイフンあり）
var regex = /^(0[1-9]-\d{1,4}-\d{1,4}-\d{4}|0[7-9]0-\d{4}-\d{4}|050-\d{4}-\d{4})$/;
固定電話、携帯電話（ハイフンあり）
var regex = /^(0[1-9]-\d{1,4}-\d{1,4}-\d{4}|0[7-9]0-\d{4}-\d{4})$/;
固定電話（ハイフンあり）
var regex = /^0[1-9]-\d{1,4}-\d{1,4}-\d{4}$/;
携帯電話（ハイフンあり）
var regex = /^0[7-9]0-\d{4}-\d{4}$/;
IP電話（ハイフンあり）
var regex = /^050-\d{4}-\d{4}$/;
フリーダイヤル（ハイフンあり）
var regex = /^0120-\d{1,3}-\d{4}$/;
固定電話、携帯電話 、フリーダイヤル、IP電話（ハイフンなし）
var regex = /^(0[5-9]0\d{8}|0120\d{5,7}|050\d{8}|0[1-9]\d{9,11})$/;
固定電話、携帯電話、IP電話（ハイフンなし）
var regex = /^(0[1-9]\d{9,11}|0[7-9]0\d{8}|050\d{8})$/;
固定電話、携帯電話（ハイフンなし）
var regex = /^(0[1-9]\d{9,11}|0[7-9]0\d{8})$/;
固定電話（ハイフンなし）
var regex = /^0[1-9]\d{9,11}$/;
携帯電話（ハイフンなし）
var regex = /^0[7-9]0\d{8}$/;
IP電話（ハイフンなし）
var regex = /^050\d{8}$/;
フリーダイヤル（ハイフンなし）
var regex = /^0120\d{5,7}$/;
その他のバリデーションチェック
フォームを構築する際、バリデーションチェックするその他のプログラムコードについては、別の記事で詳しく取り上げています。詳細はそちらを参照してみてください。
まとめ
電話番号の形式チェックは、ユーザーエクスペリエンスの向上やデータの整合性の確保に役立ちます。JavaScriptやjQueryを利用することで、このチェックを簡単かつ効率的に実装することができます。正確なデータを取得するためのこの手法は、多くのウェブアプリケーションやサイトでの必須技術といえるでしょう。
