数値 regex JavaScriptバリデーター

数値 regexとは？

JavaScriptでは、regex（正規表現）は整数、小数、通貨などのフォーマット済み値といった数値入力のバリデーションとマッチングによく使用されます。数値データの構造が重要なフォーム、財務計算、入力バリデーションで特に有用です。

JavaScript regexは有効な数値を識別し、文字や不正な句読点などの予期しない文字を拒否するための簡潔なパターンを提供します。

数値バリデーションのregexパターン

1. 整数のバリデーション

   記号や小数点のない整数をバリデーションします。

   const regex = /^\d+$/;

   マッチ：「123」、「2024」

   不一致：「12.3」、「-100」

2. 小数のバリデーション

   オプションの小数を含む数値をバリデーションします。

   const regex = /^\d+\.\d+$/;

   マッチ：「3.14」、「99.999」

   不一致：「100」、「abc」

3. 符号付き数値のバリデーション

   オプションの負またはプラスの符号を許可します。

   const regex = /^[+-]?\d+(\.\d+)?$/;

   マッチ：「-45」、「+99.99」、「0」

   不一致：「--12」、「100+」

4. カンマ付きフォーマット済み数値

   1,000または12,345,678などの数値にマッチします。

   const regex = /^\d{1,3}(,\d{3})*$/;

   マッチ：「1,000」、「100,000」

   不一致：「1000」、「1,,000」

JavaScriptで数値をバリデーションする方法

組み込みのRegExpクラスまたはregexリテラルを.test()や.match()と組み合わせて使用します：

const number = "12345";
const pattern = /^\d+$/;
console.log(pattern.test(number)); // true

test()メソッドは正規表現と指定した文字列の間でマッチを検索し、マッチする場合はtrue、そうでない場合はfalseを返します。これにより、ユーザー入力が特定のフォーマットを満たすかどうかを素早く確認できます。

このメソッドはブール値を返します：

• パターンが文字列にマッチする場合はtrue

• マッチしない場合はfalse

まとめ：

• マッチが存在するかどうかを確認して結果を得るにはtest()を使用してください。

• 文字列内のどこでマッチするかを知る必要がある場合はsearch()を使用してください。

カスタムregexのテストにはインタラクティブなJavaScript regex テスターを使用できます。

グローバルフラグとlastIndexの動作

グローバル（g）フラグを持つregexでtest()を使用すると、regexはlastIndexプロパティを繰り返しのテスト間で保持します。マッチが見つかるとlastIndexはマッチの直後の位置に増加し、失敗すると0にリセットされます。

const regex = /\d+/g;
regex.test("123");    // true (lastIndex now at 3)
regex.test("456");    // true (lastIndex now at 3)
regex.test("789");    // true (lastIndex now at 3)
regex.test("abc");    // false (lastIndex resets to 0)

ベストプラクティス：グローバルregexを異なる文字列に対して使用する場合は、各新しいテストの前にregex.lastIndex = 0を呼び出すか、単一の文字列内の反復マッチングに実際に必要でない限りグローバルフラグを避けてください。

プロのヒント

• 数値入力のサーバーサイド検証には数値 regex Goバリデーターまたは数値 regex Javaバリデーターを使用してください。

• 数値データがバリデーション前にエンコードされている場合はBase64デコーダーを使用してください。

• OTPのような数値ベースの認証システムを構築している場合はトークンジェネレーターと組み合わせてください。

• バリデーションとしてparseFloat()の使用は避けてください。厳密ではなく「123abc」のような無効な文字列が部分的に通過する可能性があります。

• インジェクションリスクや不正なフォーマットを防ぐために、regexバリデーションと並行して数値入力を常にサニタイズしてください。

メタ文字の説明

• ^：文字列の先頭

• $：文字列の末尾

• \d：任意の数字[0-9]

• +：前の要素の1回以上の繰り返し

• *：前の要素の0回以上の繰り返し

• ?：オプション（0または1回）

• .：小数点にマッチするエスケープドット

• [,]：カンマのリテラル

• ()：グループ化

• []：文字クラス

例

例1：整数のバリデーション

const input = "250";
const pattern = /^\d+$/;
console.log(pattern.test(input)); // true

JavaScript regex テスターを使用して独自のパターンを作成してみてください。

例2：小数のバリデーション

const input = "3.1415";
const pattern = /^\d+.\d+$/;
console.log(pattern.test(input)); // true

例3：符号付き数値の検出

const input = "-0.99";
const pattern = /^[+-]?\d+(.\d+)?$/;
console.log(pattern.test(input)); // true

ユースケース

• フォームバリデーション：年齢、数量、予算などのフィールドにユーザーが有効な数値を入力することをregexで確保します。

• 財務アプリ：取引や価格の小数精度をバリデーションします。

• データクリーニング：分析ツールにインポートする前に不正な入力をフィルタリングします。

• 認証システム：トークンジェネレーターで生成された数値OTPとログインtokenを処理するためにregexを使用します。

組み合わせを推奨するツール

• JavaScript regex テスター：JavaScriptの数値パターンを即時バリデーションします。

• トークンジェネレーター：セキュアな数値文字列やOTPの生成に有用です。

• Base64デコーダー：regexを適用する前に数値データをデコードします。

• メール regex JavaScriptバリデーター：完全なフォーム処理のためにメール入力と並行して数値データをバリデーションします。

• IPアドレス regex JavaScriptバリデーター：数値IPアドレスもバリデーションする場合に有用です。