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

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

因为 keydown 在 字符实际输入之前被触发。请参阅我添加输出的 fiddle :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 事件。看到这个 fiddle :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;
  }
});

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