如何限制在jquery中输入任何前2位和后8位的数字

Question

我正在尝试检查 jquery 中 on("keypress keyup blur",function (event)) 函数中小数点前后的位数和总位数。这对我不起作用。

我的 html 代码中有一个输入元素，假设用户输入：

• 只有数字

• 十进制前最小 0 和最大 2 位

• 小数点后最小 0 和最大 8 位

• 只有一位小数

我试图为此制作下面的正则表达式 /^\d{0,2}(.\d{0,8})?$/

这对我来说似乎还不错，但是当我在代码中使用 jquery 尝试它时失败并允许用户在小数点前输入 2 位以上的数字

$("#longitude").on("keypress keyup blur",function (event) {  
  $(this).val($(this).val().replace(/[^\d\.].+/, ""));
    if ((event.which < 46 || event.which > 57) || $(this).val().length>9 || $(this).val()===/^\d{0,2}(\.\d{0,8})?$/) {
      event.preventDefault();
    }
  });

我希望它不应该允许在两位数之后按下一个键，如果小数点不存在，同时键入自己。如果用户输入小数，它应该允许进一步的 8 位数字

有效字符串（小数点前最小0和最大，小数点后最小0和最大8，小数可选）：

• 12.12345678

• 1.12345678

• .12345678

• 12.12345

• 1.1234

• .123456

• 12

• 1

无效的字符串是

• 123.12345678

• 123.123456789

• 12.12.12

Answer 1

你可以使用以下。

^[0-9]{0,2}([.][0-9]{0,8})?$

例子，

Try it here

Answer 2

当输入不符合所需结构的内容时，您可以使用单个正则表达式而不是检查event.which 的数字来更正输入。然后，当发生这种情况时，您可以用最后知道的有效输入替换错误的输入。

请注意，您希望允许 0-2 个数字、一个点和 0-8 个数字，最多 11 个字符，所以我认为这个 $(this).val().length>9 应该是 11。

由于前面的模式也允许在末尾添加一个点，例如，您可以在提交表单时使用此正则表达式检查最终值，该正则表达式检查该值是否为 1-2 位数字后跟一个点和 1 -8 位数字或| 一个点和 1-8 位数字，不接受空字符串。

^(?:\d{1,2}(\.\d{1,8})?|\.\d{1,8})$

Regex demo

let lastValid = "";
$("#longitude").on("keypress keyup blur", function(event) {
  if (/^\d{0,2}(?:\.\d{0,8})?$/.test($(this).val())) {
    lastValid = $(this).val();
  } else {
    event.preventDefault();
    $(this).val(lastValid);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="" name="">
  <input type="text" value="" id="longitude">
</form>