正規表現を用いて JavaScript で数値チェックを行う関数

2017/02/15 , ,

JavaScript には数値チェック用の関数として isNaN 関数を利用する人がいますが、あまりオススメできない方法です。理由は isNaN 関数は「数値であることをチェックする」関数ではなく「数値でないことをチェックする関数」であるからです。状況によっては isNaN で賄えるので、必ずしもダメではありませんが、きちんと関数の仕様を理解しておかないとバグの温床となるため注意が必要です。

そもそも NaN とは、Not a Number の略です。「数値でない」ことを表しているので、前述の isNaN 関数の説明も理解いただけると思います。

この関数に undefined を引数に渡すと true が返却されますが、null を渡すと false が返却されます。これは null 値が数値の 0 として変換されてしまう JavaScript の仕様によるものです。同様に、true や false も各々 0 と 1 に変換されるため、false を返却します。

そこで今回は、入力されたデータに基づき、正規表現を用いて数値チェック関数を作成してみることにしました。

数値を判定する正規表現

チェック対象の数値には様々なパターンがあります。符号付きのケースでは、プラスやマイナスの記号が許容されます。そして小数を含むケースは小数点のコロン “.” を 1つだけ許容しなくてはいけません。更に、0以上の整数であれば数値のみが許容対象になります。

まずは、それらの条件に合う正規表現を準備しましょう。

数値のパターンに応じた正規表現

数値パターン正規表現 (頭の連続 0 NG)正規表現 (頭の連続 0 OK)
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+)?$/

上記の表右側のパターンにある頭の連続 0 とは「000000123」のように、ゼロ埋めした数値を指します。

つまり、ゼロ埋めの状態で数値のみを識別したいのであれば、右側の正規表現を利用してください。念のため、符号や小数も使えるゼロ埋めパターンも用意していますが、一般的にゼロ埋めを許容するのは、会員番号や ID のような何かを識別するためのコード値として利用するケースに限られます。

その場合は符号や小数を許容するわけにはいかないので、単純に「/^\d*$/」を使えば OK です。

これはあくまでも一例なので、チェックしたいパターンに応じて、適切な正規表現を選んで関数を作成してください。

上記内容は半角数字を条件としています。全角数字を許容する場合は半角数字を表す「\d」が利用できないため、以下の通り書き変える必要があります。

[1-9] → [1-91-9]
\d → [0-90-9]

ただしこのケースでは、全角と半角が混在しても OK となるのでご注意ください。

数値チェック関数を作成する

では実際にプログラム化してみましょう。下記例では「符号あり小数 (- のみ許容)」を条件として、isNumber 関数を作成します。下記のチェック条件パターンを変更すれば、別のパターンでチェックすることも可能です。

それではこの関数の動作を確認してみましょう。

数値チェック関数サンプル

次のテキストボックスに入力し、フォーカスが外れると入力チェックを行うよう仕掛けてあります。


数値か否かの二択であるため、空データの場合は「数値ではない」と判断されます。また、前後にスペースが入っている場合も文字列の混入とジャッジし数値以外の扱いとなります。もし後者を許容するのであれば、trim 関数を噛ませてスペースを排除してから正規表現のチェックをすれば OK です。

以上、正規表現を用いて JavaScript で数値チェックを行う方法でした。

PAGE TOP ↑