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

Posted 2023-05-09

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

【英文标题】：Restricting text box inputs to a given regexp using jQuery

【发布时间】：2010-12-05 13:58:40

【问题描述】：

考虑以下文本框：

<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 实现这一目标的最简单方法是什么？

【参考方案1】：

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

【讨论】：

好收获！我已经调整了问题中的正则表达式。谢谢！

【参考方案2】：

如果您不知道用户要输入多少个字符（并且只想将它们限制为数字），那么jQuery Validation Plugin 是您的最佳选择。

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

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

如果您不只关注数字并且必须检查正则表达式，this post 可以向 jQuery 验证插件添加自定义验证方法，这应该可以满足您的需求。

希望有帮助！

【讨论】：

谢谢，但在这种情况下，我真的想在输入时进行过滤，而不是在提交时。

Masked 输入插件默认在输入时进行验证，如果配置正确，jQuery 验证插件可以在按键事件（输入）上进行验证。请参阅文档中的validate() 选项，特别是onkeyup: true。

哦，不知道。谢谢。

【参考方案3】：

我建议您让用户随意输入任何内容，然后在提交表单时进行验证。 （当然你仍然必须检查服务器端，因为他可以轻松禁用或更改 javascript 验证代码）

为了验证查看

jQuery Validation Pluging

【讨论】：

谢谢，但在这种情况下，我真的想在输入时进行过滤，而不是在提交时。

【参考方案4】：

定义一个全局变量“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>

这应该让你开始