如何使用 JQuery 正确检查值是否为数字？

Question

进入一个 JQuery 脚本我做这样的事情来检查插入到具有 id="variazioneAnticipo 的输入字段中的值是否是一个数字：

var variazioneAnticipo = $("#variazioneAnticipo").val();

if($.isNumeric(variazioneAnticipo)) {
    alert("NUMBER");
}
else {
     alert("NOT A NUMBER");
}

这很好用，但唯一的问题是 isNumeric() JQuery 函数也考虑数字 指数表示法 和其他我不想考虑的表示法号码。

这里怎么看：https://api.jquery.com/jQuery.isNumeric/这些符号被认为是数字：

$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)

如何防止这些符号被视为数字？我可以通过 isNumeric() 函数以某种方式指定对我来说什么是数字，什么不可以？

或者如果一个值是一个数字而不考虑前面的情况，我该怎么办？

Answer 1

1. 在input 上使用pattern 属性
2. 在输入上绑定 keyup 事件
3. 输入值后，检查值是否满足浮点正则表达式

$('#num').on('keyup', function() {
  var value = $(this).val();

  if (/^[0-9]+(\.[0-9]+)?$/.test(value)) {
    $('#message').text('Valid');
  } else {
    $('#message').text('Invalid');
  }
});

#num:invalid {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" pattern="[0-9]+(\.[0-9]+)?" id="num" />
<div id="message"></div>

Regex Explanation:

/^[0-9]+(\.[0-9]+)?$/

1. ^：行首
2. [0-9]+：匹配一个或多个从 0 到 9 的数字
3. (\.[0-9]+)?：匹配出现的一个或多个数字，后跟一个小数点。整个组可以出现零次或一次。
4. $: 行尾

只有 HTML 和 CSS 的相同代码

#valid,
#invalid {
  display: none;
}
#num:invalid,
#invalid {
  color: red;
}
#num:valid,
#valid {
  color: green;
}
#num:invalid ~ #invalid {
  display: block;
}
#num:valid + #valid {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" pattern="[0-9]+(\.[0-9]+)?" id="num" />
<div id="valid">Valid</div>
<div id="invalid">Invalid</div>

Answer 2

扩展Tushar'scomment，用一个检查的小提琴来回答：

$(function () {
  $("#out").click(function () {
    alert(/^[0-9]+(?:\.[0-9]+)?$/.test($("#in").val()) ? "Yes" : "No");
  });
});

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input type="text" id="in" />
<input type="submit" value="Check" id="out" />

非常适合数字、浮点值，而不是十六进制或指数。