需要很長時間才能運行的Javascript表單驗證

問題：如何加速驗證，同時繼續使用jqBootstrapValidation作爲我的驗證器？需要很長時間才能運行的Javascript表單驗證

問題：我有一個小的接觸形式設置真的很好用jqBootstrapValidation作爲驗證，但是當我開始添加額外的字段就變得很慢，到了那裏，如果我多個字符輸入到一個表單字段點它需要驗證者超過一秒才能做出響應。

減速可以很容易地觀察20-30表單字段。

我已經試過：到目前爲止，我已經嘗試了一些東西就像使用style="display: none;"隱藏元素，但似乎做出的速度沒有區別。

在我提交之前，我可以對部分表單進行處理，但是我並沒有很好運。有沒有更好的方法來處理這種情況，也許有一些簡單的東西我錯過了，因爲我對JavaScript比較陌生？

我目前的表格/ js：工作良好，直到我們添加更多表單域。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>My Title</title> 
</head> 
<body id="page-top" class="index"> 
    <form name="sentMessage" id="contactForm" novalidate> 
     <div class="control-group"> 
      <label>Name</label> 
      <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please a name."> 
      <p class="help-block text-danger"></p> 
     </div> 
     <div class="control-group"> 
      <label>Message</label> 
      <textarea rows="3" placeholder="Message" id="message" required data-validation-required-message="Enter a message."></textarea> 
      <p class="help-block text-danger"></p> 
     </div> 
     <br> 
     <div id="success"></div> 
     <div> 
       <button type="submit">Click to send</button> 
     </div> 
    </form> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 
    <!-- Contact Form Script --> 
    <script src="js/jqBootstrapValidation.js"></script> 
    <script> 
    $(function() { 
     $("#contactForm input,#contactForm textarea").jqBootstrapValidation(); 
    }); 
    </script> 
</body> 
</html>

驗證使用： http://ReactiveRaven.github.com/jqBootstrapValidation/

來源

2016-06-28 sorifiend

注：我使用bootstrap來管理我的佈局，這就是使用jqBootstrapValidation的原因。爲了這個問題的目的，我已經刪除了所有與bootstrap相關的代碼，因此更容易處理。 – sorifiend

我仍然在尋找一個更好的答案，但在同時，我發現周圍的工作。

周圍的工作僅僅是爲了驗證只在提交表單，當某些事件發生，因此，從積極的驗證刪除所有的慢了下來：

的jqBootstrapValidation驗證所註冊的運行驗證，只要任何的發生以下事件keyup, focus, blur, click, keydown, keypress, change，這意味着無論何時我在一個盒子中輸入了很多同時發生的事件並導致巨大的減速。簡單的解決方法是簡單地刪除我們不想觸發的事件，只保留關鍵事件。

例如在jqBootstrapValidation.js文件起始於線431，我們可以看到不同的事件：

// ============================================================= 
    //            WATCH FOR CHANGES 
    // ============================================================= 
    $this.bind(
    "submit.validation", 
    function() { 
     return $this.triggerHandler("change.validation", {submitting: true}); 
    } 
); 
    $this.bind(
    [ 
     "keyup", 
     "focus", 
     "blur", 
     "click", 
     "keydown", 
     "keypress", 
     "change" 
    ].join(".validation ") + ".validation", 
    function (e, params) {

所以在我的情況下，我把它改成只註冊了「變化」和「模糊」的事件，如所以：

// ============================================================= 
    //            WATCH FOR CHANGES 
    // ============================================================= 
    $this.bind(
    "submit.validation", 
    function() { 
     return $this.triggerHandler("change.validation", {submitting: true}); 
    } 
); 
    $this.bind(
    [ 
     "blur", //validate when a field looses focus 
     "change" //Validate on form submit 
    ].join(".validation ") + ".validation", 
    function (e, params) {

可能需要進一步測試以確保其按預期工作。

我認爲值得一提的是，這個答案https://stackoverflow.com/a/1587543/1270000也提供了額外的幫助，以小規模優化。

來源

2016-06-28 14:32:00 sorifiend

我使用的很簡單的技巧是創建一個調用實際方法的計時器（window.setTimeout），並在每個可能快速發生的操作中重置該計時器。 KEYUP。這樣，重碼就被觸發一次，例如，最後一次擊鍵後半秒鐘。用戶不會注意到任何差異，並且由於它只發布一次，所以應該好得多。希望這是有道理的。 –

現在這是一個非常聰明的想法，那樣我就不會失去任何功能！非常感謝您的意見。 – sorifiend

不是100％確定它會在這個特定的情況下真正起作用，但肯定值得一試。讓我知道事情的後續。 :-) –

需要很長時間才能運行的Javascript表單驗證

回答

相關問題