1

如果该输入与其最新按键的组合值未传递正则表达式，如何防止用户更改输入框中的字符串？

我看到了各种关于如何使用 keypress 测试单个字符的示例，但我需要将整个值与正则表达式匹配，而不仅仅是他们按下的键。

例如，文本框需要符合以下正则表达式：

"^023-[0-9]{0,7}$"

因此，如果他们想更改"023"为，则应在删除字符"23"时阻止他们。删除after0也是如此。一旦他们输入超过 7 个数字，它也应该阻止他们。这不能在模糊上完成。必须在每次击键后完成。性能不是问题。-023023

如果我在 jQuery 中使用 keypress() 事件，并像这样获取输入元素的值：

$(this).val()

然后我只会在他们按下键之前得到值 - 而不是之后。因此，无法针对我的正则表达式测试输入。我不能简单地将按下的键附加到这个字符串，因为我不能假设他们只在字符串的最右侧输入键。

我研究了 keydown/keyup 事件，虽然 keyup 似乎在用户按下一个键后给了我输入的当前值，但我发现很难消除他们键入的内容的影响...... which keypress()显然没有问题。

var regex = new RegExp("^023-[0-9]{0,7}$");

$("#number").keyup(function(event) {
    var number = $(this).val();

    if(!regex.test(number)) {
        event.preventDefault();

        return false;
    }
});

上面的代码只是不起作用。似乎 keypress() 使我能够停止他们键入的内容，但 keyup 使我能够获取当前值。我需要一个两者兼得的解决方案；）

问题实际上源于浏览器没有 MVC 架构这一事实。模型就是视图。不幸的是，我们无法在视图更新之前验证更新的模型......因为我们需要在 keyup 事件期间更新视图以获取更新的模型数据......到那时，阻止它们更新为时已晚查看，因为它已经更新。

4

5 回答 5

2

How about this:

var prevValue = "";
$("#number").keydown(function(e) {
   prevValue = $(this).val();
});

$("#number").keyup(function(e) {
...
   if(!regex.test(number))
      $(this).val(prevValue);
      // show error or other processing you need to do
});
于 2012-07-02T16:29:36.693 回答
1

尝试这个：

var pattern = new RegExp("^023-[0-9]{0,7}$");

$("#number").change(function(e){
if (!pattern.test($(this).val())) {
      return false
    }
})
于 2012-07-02T16:33:33.847 回答
0

如果您可以使用 jQuery Validate 插件，您可以创建自定义验证器来匹配您的 RegEx。然后您所要做的就是将验证器映射到该输入。您仍然需要在服务器端进行验证，但您可能已经在这样做了。

于 2012-07-02T16:35:54.427 回答
0

您拥有的event参数将包含您正在处理的事件的所有详细信息。这将包括被按下的键。

值得注意的是，keydownand keyupevents 将返回按下的键，而keypress将返回输入的字符，这可能更适合您的选择。

请参阅此处的帮助页面：http: //api.jquery.com/keypress/了解更多详细信息。

总之，虽然event.which应该做你想做的事。您可以将其与文本框的原始值结合起来，并从中获取新值。如果它无效，则取消该事件，如果它有效，则放手...

于 2012-07-02T16:30:18.467 回答
0

要执行您想要的操作，需要jquery caret 插件。请注意，您需要从文件开头删除注释（或至少移动它们），否则代码开头的字节顺序标记将导致错误。

因此，您需要做的是捕获按键，在字符串中的正确位置插入字符，检查新字符串是否有效，然后显示新插入或不显示。我认为以下内容可以满足您的需求：

$(document).ready(function(){
    var regex = new RegExp("^023-[0-9]{0,7}$");
    var caretpos;

    $('#number').keypress(function(event){
        // get the caret position
        caretpos = $(this).caret().start;
        //split the current value according to where the caret is
        valuestart = $(this).val().substring(0,caretpos);
        valueend = $(this).val().substring(caretpos);
        // insert the fired character into the string
        valuetocheck = valuestart + String.fromCharCode(event.which) + valueend;
        // check if the proposed new value passes the regex
        if (!regex.test(valuetocheck)) {
            // failed, prevent the character being shown
            event.preventDefault();
        }
    });
});

我已经在最新版本的 FF、Chrome、Safari、Opera 和 IE9 中对此进行了测试。在 FF 和 Opera 中，光标按键在其他浏览器中像往常一样移动插入符号时被完全忽略，因此您可能需要添加一些代码以确保其行为一致。您可能还想添加一些代码来处理如果用户选择某些字符而不是单击输入会发生的情况。jquery caret 插件有选择的使用示例。

于 2012-07-03T12:08:32.867 回答