0

嘿伙计们，我提出了这个 JSFiddle，所以你知道我在说什么，因为它有点难以解释。这个 JS 使用一个简单的正则表达式/[1-9][0-9]{3}/来检测一个 5 位数字 10000-99999。这工作正常，在此范围内输入 5 位数字后，颜色变为绿色，否则颜色保持为红色。问题是当达到 5 位数字后“删除”字符时，颜色不会像应有的那样恢复为红色，而是保持绿色，直到只剩下两个字符。我正在尝试解决此问题，但不确定为什么会这样？帮助将不胜感激。

这是用于此的 Jquery。

<script>
    $(document).ready(function ()
    {
        $('#invoice').keydown(function()
        {
            var regex = /[1-9][0-9]{3}/;
            if (regex.test($('#invoice').val()))
            {
                $('#invoice').css({'color': '#0f0'}).addClass('valid-short');
                $('#path').val('check');
            } else {
                $('#invoice').css({'color': '#f00'}).removeClass();
                $('#path').val('update');
            }
        });
    });
</script>

<ul>
    <li>
        <label for='invoice'>Invoice</label>
        <input type='text' name='invoice' id='invoice' autofocus='autofocus' />
        <input type='hidden' name='path' id='path'autofocus='autofocus' required='required' />
    </li>
</ul>
4

5 回答 5

2

请改用此代码：

   $(document).ready(function ()
        {
            $('#invoice').keyup(function()
            {
                var regex = /^[1-9][0-9]{4}$/;
                if (regex.test($('#invoice').val()))
                {
                    $('#invoice').css({'color': '#000'}).addClass('valid-short');
                    $('#path').val('check');
                } else {
                    $('#invoice').css({'color': '#f00'}).removeClass();
                    $('#path').val('update');
                }
            });
        });

变化：

  1. 使用 keyup 而不是 keydown 来修复你的错误。
  2. 使用实际上正确的正则表达式。您的原始正则表达式（以及一些答案）允许一些错误的数字。
于 2013-07-14T20:46:15.427 回答
1

您的问题是您正在使用$.val()检查输入的值。但是直到keyup事件之后才设置输入的值。

所以改用：keyup事件keydown

除此之外，您的正则表达式很好：

  • 表达式有效，以 5 个字符开头
  • 表达式不允许以 0 开头
于 2013-07-14T20:48:00.880 回答
0

.keyup 会比 keydown 更好。此外，将其用作您的正则表达式：

var regex = /\d{5}/;
于 2013-07-14T20:44:42.817 回答
0

/[1-9][0-9]{3}/如果我没记错的话，将匹配四位数字。第一个 [] 匹配第一个数字，第二个 [] 匹配第二个、第三个和第四个数字。尝试/^[1-9][0-9]{4}$/改用。

编辑：另一种方法是不使用正则表达式并使用如下内容：

var val = $('#invoice').val();
if(val >= 10000 && val <= 99999) {

}

这应该比使用正则表达式更快。

于 2013-07-14T20:44:54.270 回答
0

正则表达式显然匹配 4 个数字，而不是 5 个！

尽管我不知道 JQuery，但我很确定在 keydown 事件发生后文本字段的值会发生变化。

因此，当您输入第五个数字时，它会正确匹配，而当您删除数字时，它的行为会很奇怪。

问候，

AKDA

于 2013-07-14T20:47:10.563 回答