Question

我正在尝试使用JQuery创建完美的数字验证。我看到This网站更漂亮，但是如果您键入某些不允许数字，那么它仍然会显示为有效数字。

如何仅从 Allowed 列表中为示例编号创建此JQuery验证？

允许：

1
1.2454554
0.25325
654664

不允许：

0。
05
0999
0.435.53
0,53
dfgdfhjghfs

代码：

<script>
$('#ch_rate').keyup(function(){
  var rate_input = $(this).val();
  var rate_regexp = new RegExp('^\d+(\.\d+)*$');
  if (rate_input.replace(/ /g,'').length > 1 && rate_input.charAt(0) == 0 && rate_input.indexOf('.') == 0 || !rate_regexp.test(rate_input)) {
   // invalid
  }
});
</script>

输入：

<input id='ch_rate' type='text' pattern='[0-9\.]'/>

Answer 1

我使用/^((0|[1-9]\d*)(\.\d+)?)?$/来验证您提供的字符串。

(0|[1-9]\d*)检查字符串是否以0或正整数开头。

(\.\d+)?检查是否存在一组带数字的小数点。

((0|[1-9]\d*)(\.\d+)?)?最后一个问号是检查字符串是否为空。

这是对允许和不允许列表的测试：

let rate_regexp = /^((0|[1-9]\d*)(\.\d+)?)?$/;

let List = [
  "1",
  "1.2454554",
  "0.25325",
  "654664",
  "", // add an empty string here
  "0.",
  "05",
  "0999",
  "0.435.53",
  "0,53",
  "dfgdfhjghfs"
];

List.forEach(function(value){
  document.body.innerHTML += `${value} : ${rate_regexp.test(value)}<br>`;
})

这是一个演示：

$('#ch_rate').keyup(function(){
  let $this = $(this);
  var rate_input = $this.val();
  var rate_regexp = /^((0|[1-9]\d*)(\.\d+)?)?$/;
  if (!rate_regexp.test(rate_input)) { // invalid
    $this.css({color: "red"});
  }
  else{
    $this.css({color: "black"});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='ch_rate' type='text' pattern='[0-9\.]'/>

高级JQuery编号验证

1 个答案: