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

Question

问题：如何在继续使用 jqBootstrapValidation 作为我的验证程序的同时加快验证速度？

问题: 我有一个小型联系表单设置，使用 jqBootstrapValidation 作为验证器非常好，但是当我开始添加其他字段时，它变得非常慢，以至于如果我在表单字段中键入多个字符，验证器需要一秒钟以上的时间才能响应。

使用 20-30 个表单域可以很容易地观察到速度变慢。

我试过了: 到目前为止，我已经尝试了很多方法，比如使用 style="display: none;" 隐藏元素，但这似乎对速度没有影响。

我可以在提交之前分批处理表单，但我运气不太好。有没有更好的方法来处理这种情况，也许我缺少一些简单的东西，因为我对 JavaScript 比较陌生？

我当前的 form/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/

Answer 1

我仍在寻找更好的答案，但与此同时我找到了解决方法。

解决方法是仅在提交时和某些事件发生时验证表单，从而消除活动验证器的所有减速：

jqBootstrapValidation 验证器注册到运行每当以下任何事件发生时进行验证 keyup, focus, blur, click, keydown, keypress, change，这意味着每当我在一个框中输入时，很多事件同时发生并且导致巨大的减速。简单的解决方法就是删除我们不想触发的事件，只保留关键事件。

例如，在从第 431 行开始的 jqBootstrapValidation.js 文件中，我们可以看到不同的事件：

  // =============================================================
  //                                             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) {

所以在我的例子中，我将其更改为仅注册 "change" 和 "blur" 事件，如下所示：

  // =============================================================
  //                                             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) {

可能需要进一步测试以确保其按预期工作。

我认为值得一提的是这个答案还提供了额外的小优化帮助。

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

Javascript form validation taking a long time to run

javascript

jquery

jqbootstrapvalidation

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

Javascript form validation taking a long time to run

javascript

jquery

jqbootstrapvalidation

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