Question

问题：如何继续使用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/

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

所以在我的情况下，我将其更改为仅注册“更改”和“模糊”事件，如下所示：

  // =============================================================
  //                                             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还为小优化提供了额外的帮助。

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

1 个答案: