正規表現を用いて JavaScript で数値チェックを行う方法
JavaScript の数値チェックに isNaN 関数を利用する人がいますが、あまりオススメできない方法です。むしろ正しい仕様を理解していないのであれば、バグの温床になる危険な関数です。
isNaN を勧めない理由は次のページに詳しくまとめているので、参考にしてください。
どのような形式で数値チェックを行いたいか明確な目的があるならば、正規表現を用いたほうが確実なチェックを行えます。
数値を判定する正規表現
チェック対象の数値には様々なパターンがあります。プラスやマイナスの記号を許容するなら、符号付きの条件が必要になります。そして小数を含む場合、小数点 “.” を１つだけ許容しなくてはいけません。
一概に数値チェックと言っても条件は様々です。まずは、それらの条件に合う正規表現を準備しましょう。
数値のパターンに応じた正規表現
かなり細かいレベルで分類しました。ゼロ埋めありとは「000000123」のように、ゼロ埋めした数値を許容したパターンになります。
| 数値パターン | 正規表現（ゼロ埋めなし） | 正規表現 (ゼロ埋めあり) |
|---|---|---|
| 0以上の整数のみ | /^([1-9]\d*|0)$/ | /^\d*$/ |
| 整数 (- のみ許容) | /^[-]?([1-9]\d*|0)$/ | /^[-]?\d*$/ |
| 整数 (+, – 許容) | /^[+,-]?([1-9]\d*|0)$/ | /^[+,-]?\d$/ |
| 符号なし小数 | /^([1-9]\d*|0)(\.\d+)?$/ | /^\d(\.\d+)?$/ |
| 符号あり小数 (- のみ許容) | /^[-]?([1-9]\d*|0)(\.\d+)?$/ | /^[-]?\d*(\.\d+)?$/ |
| 符号あり小数 (+, – 許容) | /^[+,-]?([1-9]\d*|0)(\.\d+)?$/ | /^[+,-]?\d(\.\d+)?$/ |
念のため、符号や小数も使えるゼロ埋めパターンも用意していますが、一般的にゼロ埋めを許容するのは、会員番号や ID のような何かを識別するためのコード値として利用するケースに限られます。ただその場合は、符号や小数点を許容しない数値だけで構成されているかチェックする「/^\d*$/」を使えば大丈夫です。
今回紹介するサンプルプログラムはあくまでも一例なので、チェックしたいパターンに応じて、上記から適切な正規表現を選んで関数を作成してください。
上記内容は半角数字を条件としています。全角数字を許容する場合は半角数字を表す「\d」が利用できないため、以下の通り書き変える必要があります。
[1-9] → [1-9１-９]
\d → [0-9０-９]
ただしこのケースでは、全角と半角が混在しても OK 判定となるのでご注意ください。
数値チェック関数を作成する
では実際にプログラム化してみましょう。下記例では「符号あり小数 (- のみ許容)」を条件として、isNumber 関数を作成します。下記のチェック条件パターンに別の正規表現を適用すれば、それに応じたチェックが出来るようになります。
/**
* 数値チェック関数
* 入力値が数値 (符号あり小数 (- のみ許容)) であることをチェックする
* [引数] numVal: 入力値
* [返却値] true: 数値
* false: 数値以外
*/
function isNumber(numVal){
// チェック条件パターン
var pattern = /^[-]?([1-9]\d*|0)(\.\d+)?$/;
// 数値チェック
return pattern.test(numVal);
}ではこの関数の動作確認をしてみましょう。
数値チェック用サンプルプログラムの動作確認
次のテキストボックスに値を入力し、フォーカスが外れると数値チェックが実施されます。
数値か否かの二択であるため、空データは「数値ではない」と判断されます。また、前後にスペースが入っている場合も文字列の混入とジャッジし数値以外の扱いとなります。もし後者を許容するのであれば、trim 関数を噛ませてスペースを排除してから正規表現のチェックをすれば大丈夫です。
以上、正規表現を用いて JavaScript で数値チェックを行う方法でした。
