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

2015/10/07

JavaScript の数値チェックに isNaN 関数を利用する人がいますが、あまりオススメできない方法です。むしろ正しい仕様を理解していないのであれば、バグの温床になる危険な関数です。

isNaN を勧めない理由は次のページに詳しくまとめているので、参考にしてください。

JavaScript の数値チェックに isNaN を使ってはいけない理由
JavaScript の数値チェックに isNaN を使うのは「あり」か「なし」か?答えは「なし」です。なぜなら isNaN 関数は「数値であることを...

どのような形式で数値チェックを行いたいか明確な目的があるならば、正規表現を用いたほうが確実なチェックを行えます。

数値を判定する正規表現

チェック対象の数値には様々なパターンがあります。プラスやマイナスの記号を許容するなら、符号付きの条件が必要になります。そして小数を含む場合、小数点 “.” を1つだけ許容しなくてはいけません。

一概に数値チェックと言っても条件は様々です。まずは、それらの条件に合う正規表現を準備しましょう。

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

かなり細かいレベルで分類しました。ゼロ埋めありとは「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-91-9]
\d → [0-90-9]

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

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

では実際にプログラム化してみましょう。下記例では「符号あり小数 (- のみ許容)」を条件として、isNumber 関数を作成します。下記のチェック条件パターンに別の正規表現を適用すれば、それに応じたチェックが出来るようになります。

数値チェック関数のサンプル【JavaScript】
/**
 * 数値チェック関数
 * 入力値が数値 (符号あり小数 (- のみ許容)) であることをチェックする
 * [引数]   numVal: 入力値
 * [返却値] true:  数値
 *          false: 数値以外
 */
function isNumber(numVal){
  // チェック条件パターン
  var pattern = /^[-]?([1-9]\d*|0)(\.\d+)?$/;
  // 数値チェック
  return pattern.test(numVal);
}

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

数値チェック用サンプルプログラムの動作確認

次のテキストボックスに値を入力し、フォーカスが外れると数値チェックが実施されます。

数値入力チェック:

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

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!