jQueryで正規表現を使って数値のチェックをする

実際に使用する際にパターンによって変わってくるので、まとめてみました。

目次

0以上の整数を判定する

もっとも単純な判定から
数値だけで構成されているかどうかをチェックするには
「/^\d*$/」
を使えばOK
これが数値を判定する場合の基本形になります。

数値をチェックする関数を作って実際にチェックしてみる

jQuery

  1. <script>
  2. /**
  3. * 数値チェック
  4. * val = 入力値
  5. * 戻り値 数値 = true
  6. * 数値以外 = false
  7. */
  8. function isNumber(val){
  9. var pattern = /^\d*$/;
  10. return pattern.test(val);
  11. }
  12. </script>

「0123」といれると「true」が戻ってきます

頭の「0」を許容しない場合は「[1-9]」を追加
「/^[1-9]\d*$/」
ただしこのままだと「0」が許可されないので↓のようにする
「/^([1-9]\d*|0)$/」

jQuery

  1. function isNumber(val){
  2. var pattern = /^([1-9]\d*|0)$/;
  3. return pattern.test(val);
  4. }

「0123」、「00」といれると「false」が戻り
「123」、「0」といれると「true」が戻ります

少数を許可する

頭の「0」を許可する場合は「/^\d*$/」「(\.\d+)?」を追加する

jQuery

  1. function isNumber(val){
  2. var pattern = /^\d(\.\d+)?$/;
  3. return pattern.test(val);
  4. }

頭の「0」を許可しない場合は「/^([1-9]\d*|0)$/」に「(\.\d+)?」を追加する

jQuery

  1. function isNumber(val){
  2. var pattern = /^([1-9]\d*|0)(\.\d+)?$/;
  3. return pattern.test(val);
  4. }

「+」、「-」を許可する

「[-]?」「[+,-]?」を「/^」の後に追加することでそれぞれの符号を許可します。
頭のゼロを許可しない、少数の場合は↓

jQuery

  1. function isNumber(val){
  2. var pattern = /^[+,-]?([1-9]\d*|0)(\.\d+)?$/;
  3. return pattern.test(val);
  4. }

数値チェックパターンリスト

数値チェック正規表現パターン頭のゼロを許可

  • 0以上の整数のみ
  • /^\d*$/
  • 整数 (- のみ許容)
  • /^[-]?\d*$/
  • 整数 (+, – 許容)
  • /^[+,-]?\d$/
  • 符号なし小数
  • /^\d(\.\d+)?$/
  • 符号あり小数 (- のみ許容)
  • /^[-]?\d*(\.\d+)?$/
  • 符号あり小数 (+, – 許容)
  • /^[+,-]?\d(\.\d+)?$/

数値チェック正規表現パターン頭のゼロを許可しない

  • 0以上の整数のみ
  • /^([1-9]\d*|0)$/
  • 整数 (- のみ許容)
  • /^[-]?([1-9]\d*|0)$/
  • 整数 (+, – 許容)
  • /^[+,-]?([1-9]\d*|0)$/
  • 符号なし小数
  • /^([1-9]\d*|0)(\.\d+)?$/
  • 符号あり小数 (- のみ許容)
  • /^[-]?([1-9]\d*|0)(\.\d+)?$/
  • 符号あり小数 (+, – 許容)
  • /^[+,-]?([1-9]\d*|0)(\.\d+)?$/

まとめ

今回実際に使ったjQueryとHTMLは↓

jQuery

  1. <script>
  2. $(function(){
  3. /**
  4. * 数値チェック
  5. * val = 入力値
  6. * pattern = 正規表現
  7. * 戻り値 数値 = true
  8. * 数値以外 = false
  9. */
  10. function isNumber(val,pattern){
  11. return pattern.test(val);
  12. }
  13. $('.numCheckBtn').on('click',function(){
  14. var element = $(this),
  15. val = element.prev().val(),
  16. pattern;
  17. switch(element.attr('data-isNumber')){
  18. case '1': pattern = /^\d*$/;
  19. break;
  20. case '2': pattern = /^([1-9]\d*|0)$/;
  21. break;
  22. case '3': pattern = /^\d*(\.\d+)?$/;
  23. break;
  24. case '4': pattern = /^([1-9]\d*|0)(\.\d+)?$/;
  25. break;
  26. case '5': pattern = /^[+,-]?([1-9]\d*|0)(\.\d+)?$/;
  27. break;
  28. }
  29. if(val == ''){
  30. alert('値が空です');
  31. }else{
  32. alert(isNumber(val,pattern));
  33. }
  34. });
  35. });
  36. </script>

HTML

  1. <input type="text" name="isNumber" placeholder="数値を入力">
  2. <button class="numCheckBtn" data-isNumber="5">チェックする</button>

正規表現でのチェックを使うと、使わない場合よりも柔軟に比較ができるようになるので、少しづつでも使うようにしていこう
ではでは〜

jquery

Posted by アツシオクムラ