Question

考虑以下文本框：

<input type="text" name="quantity" id="quantity_field" />

使用jQuery我想通过以下正则表达式将有效输入集限制为quantity_field：

<script>
  var quantityRegexp = "^(0|[1-9]+[0-9]*)$";
</script>

更具体地说，我想让浏览器丢弃输入quantity_field的任何字符，这些字符会使文本字段的值不符合给定的正则表达式。（当然也会在服务器端进行相应的检查。）

示例：

如果用户键入“foo 234”，则只会在文本框中输入“234”。
如果用户键入“001230”，则只会在文本框中输入“1230”。
如果用户键入“foo1bar”，则只会在文本框中输入“1”。

问题：使用jQuery实现此目的的最简单方法是什么？

Answer 1

不是你问题的答案（因为我不了解jQuery），但正则表达式^[1-9]*[0-9]*$可能没有你想象或想到的那样。它匹配空字符串，但也匹配000000之类的数字。我希望你不要那样，因为你的第一个字符类[1-9]明确地忽略了零。我认为您应该将第一个*更改为+：^[1-9]+[0-9]*$。但是，该正则表达式将拒绝（单个）数字0。如果你想包括它，你应该：^(0|[1-9]+[0-9]*)$。

Answer 2

jQuery Constrain plugin允许“对文本框施加灵活约束”并接受正则表达式。请参阅此demo。

Answer 3

如果您不知道用户要输入的字符数（并且只想将其限制为数字），jQuery Validation Plugin是您最好的选择。

$('form.to-validate').validate({
   rules: {
      quantity: { digits: true }
   }
});

这只允许用户输入数字。如果您知道该人要键入多少个字符，那么我还建议使用Masked Input plugin来表示jQuery，这将为用户提供他们需要键入的内容的良好视觉指示，并防止他们输入字符你不想在现场。

如果您不是仅仅使用数字并且必须检查正则表达式，this post具有向jQuery Validation Plugin添加自定义验证方法的方法，该方法可以为您提供所需的内容。

希望有所帮助！

Answer 4

我建议您让用户提供他想要的任何内容，然后对提交表单进行验证。（当然，您仍然必须检查服务器端，因为他可以轻松地禁用或更改javascript验证代码）

有关验证，请查看

jQuery Validation Pluging

Answer 5

定义一个全局变量“oldVal”（下面没有描述），它包含最后一个已知的好值。绑定到输入字段的keydown操作：

<script>
    $("#quantity_field").keydown(function() {
        var newVal = $("#quantity_field").val();
        var quantityRegexp = /^(0|[1-9]+[0-9]*)$/;

        // success
        if (quantityRegexp.test(newVal)) {
            oldVal = newVal;
            // hide error
            $("#quantity_field_error").hide();
        }

        // else failure
        else {
            $("#quantity_field").val(oldVal);
            // display error message
            $("#quantity_field_error").show();
        }
    });
</script>

这应该让你入门

使用jQuery将文本框输入限制为给定的正则表达式

5 个答案: