Question

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

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

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

$(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

验证模糊，就像你一直在做的那样，然后在表单提交上验证AGAIN，以确保你获得最后一个字段以及任何由于过快删除而未验证的字段。由于您在客户端进行操作，因此处理时间很短。

等待用户输入并验证无法正常工作

5 个答案: