等待用户输入并验证不起作用答案

【问题标题】：Wait for user input and validate not working等待用户输入并验证不起作用
【发布时间】：2013-01-09 21:59:48
【问题描述】：

我正在尝试创建一个检查输入字段有效性的函数，但我遇到了一个问题，即如果我输入得太快然后点击选项卡，它不会触发事件并且该字段是没有验证。我尝试了一些 keyup、keydown、blur、focus 和 focusout 的组合，但没有任何效果。

我以前使用过模糊，但模糊的问题在于，在他们的电子邮件地址的最后输入中，它不会触发，因为他们不应该远离电子邮件并模糊框。

这是我目前正在使用的代码。它在我等待时有效，但如果我输入“John”然后立即点击选项卡，它不会验证它。

$(function()
{
    var timer;
    // First name
    $('input[name="firstName"]').on('keydown',function(event)
    {
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
            }, 800);
    });
    // Last name
    $('input[name="lastName"]').on('keydown',function(event){
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^[A-Za-z]*$/, 'lastName', 'lastName')]
            }, 800);
    });
    // Email
    $('input[name="email"]').on('keydown',function(event){
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 'email', 'email')
            }, 800);
    });
}

关于我应该做什么的任何想法？

【问题讨论】：

通常在表单提交时检查有效性，而不是在用户导航时检查。
您可以完全不使用 javascript 进行表单验证，只需使用 htm5-form-validation:the-art-of-web.com/html/html5-form-validation
@TravisJ 通过可用性手段 - 用户输入应在用户输入后尽快验证

标签： javascript jquery

【解决方案1】：

在模糊时立即运行该函数。一种方法是使用 0 和 setTimeout，更好的方法是将其分解为函数调用并调用该函数。

$('input[name="firstName"]').on('keydown blur',function(event)
{
        clearTimeout(timer);
        timer = setTimeout(function() 
        {
            validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
        }, event.type==="blur" ? 0 : 800 );
});

【讨论】：

成功了！我猜是我在另一个输入上运行计时器时让计时器未设置的问题，然后它不会从前一个输入触发？
问题是定时器是一个全局的，所以你覆盖了它。如果您为每个元素设置了唯一的计时器，那么您可能不会看到问题。
if(this.timer) { clearTimeout(this.timer); } this.timer = setTimeout(function()...

【解决方案2】：

其他人已经给出了问题的解决方案，但是有一个轻微的重构可以让你自己更轻松。由于看起来每个事件处理程序基本上都在做同样的事情，因此您可以分离出验证并简单地为表单拥有一个事件处理程序，该处理程序委托给所有子输入，从而为您提供更多性能（更少的事件处理程序）。

var validations = {
  firstName: /^[A-Za-z]*$/,
  lastName: /^[A-Za-z]*$/, 
  email: ...
};

$('form').on('keypress input change blur', 'input[name]', function(event) {
  clearTimeout(timer);
  timer = setTimeout(function() {
    key = e.name;
    validate(validations[key], key, key);
  }, event.type in ['blur', 'input', 'change'] ? 0 : 800 );
});

【讨论】：

【解决方案3】：

您也可以在 blur 事件上验证该字段。当字段失去焦点时会触发模糊，例如当您切换到下一个字段时。

也许像：

$('input[name="firstName"]').on('keydown',function(event)
{
        clearTimeout(timer);
        timer = setTimeout(function() 
        {
            validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
        }, 800);
}).on('blur',function(event)
{
        clearTimeout(timer);
        validate(/^[A-Za-z]*$/, 'firstName', 'firstName');
});

【讨论】：

【解决方案4】：

使用keyup 或keypress 而不是keydown。 keydown 在输入实际到达控件之前被触发，因此该值尚未更新。 keyup 和 keypress 在输入值后都会触发。

更好的是，还绑定到input 和change。这将涵盖当用户通过复制和粘贴或拖放输入输入时的基础。

$('input[name="firstName"]').on('keypress input change', function(event)
{
    validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
});

【讨论】：

【解决方案5】：

验证模糊，就像您一直在做的那样，然后在表单提交时再次验证，以确保您获得最后一个字段以及由于太快跳出标签而未验证的任何字段。由于您是在客户端进行的，因此处理时间很短。

【讨论】：