等待用戶輸入和驗證工作不

我試圖做一個檢查輸入字段有效性的功能，但我遇到了這個問題，如果我太快類型，然後單擊標籤，它不」不會觸發事件，並且該字段未經驗證。我已經嘗試了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(/^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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); 
    }); 
}

關於我該怎麼做的任何想法？

來源

2013-01-09 josh

通常在表單提交時檢查有效性，而不是在用戶導航時檢查。 –

只需使用htm5-form-validation就可以完全不使用javascript完成表單驗證：http://www.the-art-of-web.com/html/html5-form-validation/ –

@TravisJ通過可用性手段 - 用戶輸入後應儘快驗證用戶輸入 –

運行功能馬上就模糊。一種方法是在setTimeout中使用0，更好的方法是將其分解爲函數調用並調用函數。在模糊

$('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-09 22:05:04 epascarello

這工作！我猜想，當我在另一個輸入上運行計時器時，我讓計時器得不到設置，然後它不會從之前輸出？ – josh

問題是計時器是一個全球性的，所以你重寫它。如果你讓每個元素都具有獨特的定時器，那麼你可能不會看到這個問題。 – epascarello

'if（this.timer）{clearTimeout（this.timer）; } this.timer = setTimeout（function（）...' – epascarello

您可以驗證的字段上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-09 22:01:58 jwatts1980

使用keyup或keypress代替。之前輸入實際上做它的方式來控制被激發，所以價值還未被更新。在輸入值後，keyup和keypress都會觸發。

更妙的是，結合input和change爲好。這將涵蓋用戶通過複製，粘貼或拖放輸入時的基礎。

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

來源

2013-01-09 22:04:34 gilly3

驗證，就像你一直在做，但隨後又開始進行驗證表單提交，以確保你得到最後一個字段，以及任何未因爲Tab鍵程過快的驗證。既然你在做客戶端，處理時間是最小的。

來源

2013-01-09 22:08:57

其他人已經給出瞭解決這個問題的方法，但是有一個輕微的重構會讓你更容易。因爲看起來每個事件處理程序基本上都在做同樣的事情，所以您可以分離出驗證，並且只需爲委託給所有子輸入的表單提供單個事件處理程序，從而爲您提供更多性能（更少的事件處理程序）。

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-09 22:13:39

等待用戶輸入和驗證工作不

回答

相關問題