如何使用JQUERY在Keyup事件中运行正则表达式

Question

我有一个正则表达式来验证多达10个整数的小数点和最多10个小数点，我如何在文本框中实现这个正则表达式，以便如果不满足验证，我就会标记错误或停止写入。

​

$(document).ready(function() {
  $('#decimal').on('input', function(e) {
    if (/^(\d{1,10})(.\d{1,10})?$/i.test(this.value)) {
      alert("Ok");
    } else {
      alert("x");
    }
  });
});

<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <p>
    <input type="text" name="value" id="decimal" /><br />
  </p>
</body>

</html>

​

Answer 1

我建议调整您的表达式，使点是它自己的组。

否则，添加一个点将是无效的，直到点后面跟着一个数字。

​

$(document).ready(function() {
  $('#decimal').on('input', function(e) {
    var $this = $(this);
    if (/^(\d{1,10})(\.?)(\d{1,10})?$/i.test(this.value)) {
      $this.removeClass('invalid');
    } else {
      $this.addClass('invalid');
    }
  });
});

.invalid {
  background-color: #FFCCCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="value" id="decimal">

​

如果在输入被认为有效之前需要点和后面的数字，那么移除问号，这使得它们的过程标记是可选的：

​

$(document).ready(function() {
  $('#decimal').on('input', function(e) {
    var $this = $(this);
    if (/^\d{1,10}\.\d{1,10}$/i.test(this.value)) {
      $this.removeClass('invalid');
    } else {
      $this.addClass('invalid');
    }
  });
});

.invalid {
  background-color: #FFCCCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="value" id="decimal">

​

根据您的注释，可以防止输入无效字符。

问题是 event不能被取消。

可以取消 event，但在接受最后一个字符之前触发。因此，您需要根据当前值加上附加的当前字符构建最终的测试值字符串。

这里的问题是您可以输入10位以上的数字，因为.是可选的。因此，我将正则表达式改为匹配1-10位数字，后面跟着一个点或一个点，后面跟着1-10位数字。

现在的问题是，如果用户键入10位数字，然后选择所有数字，期望输入的下一位数将擦除前10位，则会失败，因为处理程序仍然认为值为10位，即使这些数字将被替换。

​

$(document).ready(function() {
  $('#decimal').on('keypress', function(e) {
    var pressed = String.fromCharCode(e.which);
    var final = this.value + pressed;
    if (!final.match(/^\d{1,10}(\.|\.\d{1,10})?$/i)) {
      e.preventDefault(); // or return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="value" id="decimal">

​

有关更多参考，请参见this answer by Ashad Shanto。

Answer 2

您的正则表达式有问题，当您输入一个dot时，它就不匹配了。

我建议您将regex改为：

^\d{1,10}\.?\d{0,10}$

现在，它将匹配，当您输入数字与或不带点。

请注意，我让转义了点。否则，它的意思是'Any character'，而不仅仅是一个点。

我还更改了允许在点之后的0-10 digits，否则不可能输入dot。

EDit

如果要接受不带点的20位数字的数字，请使用以下命令：

^\d{1,10}\.?\d{0,10}$|^\d{1,20}$

它使用OR运算符'|‘给出一个替代的正则表达式，它将匹配1到20位数字而不带点。