【バリデーション】全角数値・半角数値｜フォームの入力形式チェックを実装する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただく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;
// 数値（全角・半角）の正規表現
var regex = /^[0-9０-９]*$/;
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-9]*$/)を適用して形式を確認します。
もし形式が正しければ、フォームを送信します。そうでなければ、エラーメッセージを表示します。
jQueryで実装する方法
数値 （全角・半角） の入力形式チェックをjQueryで実装する方法は以下になります。
$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();
// 数値（全角・半角）の正規表現
var regex = /^[0-9０-９]*$/;
if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('数値（全角・半角）のみを入力してください。');
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
まず、$('#myForm')というセレクタを使用して、フォームのsubmitイベントを監視します。
フォームが送信される際には、event.preventDefault()で送信を一時中断します。
.val()メソッドを利用して、ユーザーの入力値を取得します。
取得した値に対して、半角数値の正規表現(/^[0-9]*$/)を適用し、形式をチェックします。
形式が適切ならば、フォームを送信します。そうでない場合、エラーメッセージを.text()メソッドで設定します。
その他のパターン
正規表現は非常に強力なツールであり、わずかな書き換えによって様々な文字列のパターンをチェックすることができます。具体的には、以下のコード部分が核心となります。
// 数値（全角・半角）の正規表現
var regex = /^[0-9０-９]*$/;
この正規表現は現在、数値（全角・半角）の形式チェックに対応していますが、範囲やパターンを調整することで、異なる条件のチェックにも応用することが可能です。JavaScript・jQueryを利用する際、この部分の正規表現を適切にカスタマイズすることで、幅広い文字列形式の検証に対応することが出来ます。
数値（全角・半角）
var regex = /^[0-9０-９]*$/;
数値（全角）
var regex = /^[０-９]*$/;
数値（半角）
var regex = /^[0-9]*$/;
その他のバリデーションチェック
フォームを構築する際、バリデーションチェックするその他のプログラムコードについては、別の記事で詳しく取り上げています。詳細はそちらを参照してみてください。
まとめ
今回の記事を通じて、JavaScriptとjQueryを使用した数値の入力形式チェックの基本について学びました。この手法は、ユーザーからのデータを正確に収集する際に役立ちます。ウェブサイトやアプリケーション実装時にはさらなる詳細な条件や例外処理の考慮も必要ですね。皆さんと共に、ウェブ開発の世界での学びと成長を楽しみたいと思います。
