等待用户输入并确认不起作用

Question

我试图创建一个检查输入字段有效性的函数，但遇到一个问题，即如果我输入得太快，然后按Tab，它将不会触发该事件并且该字段未经验证。 我已经尝试了几种键组合，键组合，模糊，焦点和聚焦的组合，但是没有任何效果。

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

这是我当前正在使用的代码。 它在我等待时起作用，但是如果我键入“ 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 );
});

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

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

Answer 4

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

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

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

Answer 5

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