3

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

问题：我有一个小型联系表单设置，使用 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/

4

1 回答 1

0

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

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

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-28T14:32:00.050 回答