Question

我正在尝试验证按键时小数点前的13位数字和小数点后的4位数字（不包括逗号），即逗号不应算作数字。

有效案例

1,234,567,890,123.1234

1234567890123.1234

123456789012.1234

1234567890123.123

12345.123

1.2

0

有效情况下

12345abc.23 // string or special characters  not allowed

1,234,567,890,1231.1234

1,234,567,890,123.12341

12345678901231.1234

1234567890123.12341

当前正则表达式

^[0-9]{0,13}.?[0-9]{0,4}$

代码

 $("#Price").keydown(function (e) {

  var userVal =  $("#Price").val().replace(/,/g, ""); // remove commas

  var validValue = userVal.search(/^[0-9]{0,13}.?[0-9]{0,4}$/) == 0 ? true : false;

  if (userVal !== "" && !validValue && e.keyCode !== 46 && e.keyCode !== 8) {        

     e.preventDefault();

  }
  else {

     return true;
  }

});

上面的regex代码在浏览器控制台中可以正常运行：

var userVal = "1234567890123.1234";

var validValue = userVal.search(/^[0-9]{0,13}.?[0-9]{0,4}$/) == 0 ? true : false;

console.log(validValue);

但是使用keypress，keydown和keyup事件，用户仍然可以在小数点前后输入1个额外的数字。

如何防止用户键入无效案例？

Answer 1

因为在{em> before 之前触发了keydown，所以实际上在输入中键入了字符。看到我在其中添加输出的小提琴：https://jsfiddle.net/n56k0ve3/

<input id='price' type='text' value='0'></input>
<hr>
<span id='userVal'></span>
<br>
<span id='validValue'></span>


$("#price").keydown(function(e) {

  var userVal =  $(this).val().replace(/,/g, ""); // remove commas

  var validValue = userVal.search(/^[0-9]{0,13}\.?[0-9]{0,4}$/) == 0 ? true : false;

  $("#userVal").text(userVal);
  $("#validValue").text(validValue);

  if (userVal !== "" && !validValue && e.keyCode !== 46 && e.keyCode !== 8) {
     e.preventDefault();
  } else {
     return true;
  }
});

相反，使用一个在更改值之后检查该值的事件。 keyup可以工作，但是直到在输入中显示该字符后才会被触发，并且也可以不必要地触发，例如，在 Shift 或 Ctrl 上触发。相反，我们可以使用input事件。看到这个小提琴：https://jsfiddle.net/2b6pc1hu/

var prevVal = $("#price").val();

$("#price").on('input', function(e) {

  var val = $(this).val();

  var userVal =  val.replace(/,/g, ""); // remove commas

  var validValue = userVal.search(/^[0-9]{0,13}\.?[0-9]{0,4}$/) == 0 ? true : false;

  $("#userVal").text(userVal);
  $("#validValue").text(validValue);

  if (userVal !== "" && !validValue && e.keyCode !== 46 && e.keyCode !== 8) {
     $(this).val(prevVal);
  } else {
    prevVal = val;
  }
});

此外，在正则表达式中，.是通配符。如果您只希望使用句点/小数，则应转义此字符。

验证按键时小数点前后的数字

1 个答案: