0

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

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

4

5 回答 5

2

在模糊时立即运行该功能。一种方法是将 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 );
});
于 2013-01-09T22:05:04.500 回答
1

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

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 );
});
于 2013-01-09T22:13:39.897 回答
0

您也可以验证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');
});
于 2013-01-09T22:01:58.767 回答
0

使用keyuporkeypress代替keydown. keydown在输入实际到达控件之前触发，因此该值尚未更新。 keyup并keypress在输入值后触发。

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

$('input[name="firstName"]').on('keypress input change', function(event)
{
    validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
});
于 2013-01-09T22:04:34.343 回答
0

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

于 2013-01-09T22:08:57.407 回答