在删除3个字符之前，JQuery正则表达式不会删除类

Question

嘿，伙计们，我放了this 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>

Answer 1

请改用以下代码：

   $(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. 使用实际上正确的正则表达式。您最初的正则表达式(以及一些答案)允许一些错误数字。

Answer 2

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

所以使用：keyup事件而不是keydown

除此之外，您的regexp还不错：

以5 characters

• expression开头的
• 表达式有效，不允许以0

开头

Answer 3

.keyup会比keydown工作得更好。同样，使用它作为您的正则表达式：

var regex = /\d{5}/;