需要很长时间才能运行的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/

注：我使用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也提供了额外的帮助，以小规模优化。

我使用的很简单的技巧是创建一个调用实际方法的计时器（window.setTimeout），并在每个可能快速发生的操作中重置该计时器。 KEYUP。这样，重码就被触发一次，例如，最后一次击键后半秒钟。用户不会注意到任何差异，并且由于它只发布一次，所以应该好得多。希望这是有道理的。 –

现在这是一个非常聪明的想法，那样我就不会失去任何功能！非常感谢您的意见。 – sorifiend

不是100％确定它会在这个特定的情况下真正起作用，但肯定值得一试。让我知道事情的后续。 :-) –

需要很长时间才能运行的Javascript表单验证

相关推荐