javascript - 等待用户输入并验证不工作

Question

我正在尝试创建一个函数来检查输入字段的有效性，但是我遇到了一个问题，如果我输入太快然后点击选项卡，它不会触发事件并且该字段不会触发未验证。我尝试了几种 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);
    });
}

关于我应该做什么有什么想法吗？

Answer 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 );
});