Fatal编程技术网
  • javascript/
  • Javascript表单验证需要很长时间才能运行

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

javascript jquery

Javascript表单验证需要很长时间才能运行,javascript,jquery,jqbootstrapvalidation,Javascript,Jquery,Jqbootstrapvalidation,问题：在继续使用jqBootstrapValidation作为我的验证器的同时，如何加快验证速度 问题： 我使用jqBootstrapValidation作为验证程序，有一个很好的小型联系人表单设置，但是当我开始添加其他字段时，它会变得非常缓慢，以至于如果我在表单字段中键入多个字符，验证程序需要一秒钟的时间来响应 使用20-30个表单字段可以很容易地观察到减速 <!DOCTYPE html> <html lang="en"> <head> <ti

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

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

使用20-30个表单字段可以很容易地观察到减速

<!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>
我试过了： 到目前为止，我已经尝试了很多方法，比如使用
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>


我的头衔
名称


消息




点击发送
$（函数（）{
$（“#contactForm输入，#contactForm文本区域”）.jqBootstrapValidation（）；
});
使用的验证程序：
我仍在寻找更好的答案，但与此同时，我找到了一个解决办法

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

jqBootstrapValidation验证器注册为在以下任何事件发生时运行validate
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) {
可能需要进一步测试，以确保其按预期工作

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

注意：我确实使用bootstrap来管理布局，这就是使用jqBootstrapValidation的原因。为了解决这个问题，我去掉了所有与引导相关的代码，这样就更容易实现。我经常使用的一个简单技巧是创建一个计时器（window.setTimeout），调用实际的方法，并在每个可能快速发生的动作中重置计时器，例如keyup。这样，重码只会触发一次，例如，在最后一次击键后半秒。用户不会注意到任何差异，因为它只发布了一次，所以应该更好。希望这是有意义的。现在这是一个非常聪明的想法，这样我就不会失去任何功能！非常感谢您的投入。虽然不能100%确定它在这种特定情况下是否真的有效，但肯定值得一试。让我知道进展情况。：-）@ShadowWizard现在我已经使用了我的工作，似乎有很多额外的工作要添加超时到现有的验证程序代码中。但是，如果你想发布一个简短的独立示例的答案，那么我可以将其标记为已接受。干杯，我看看是否有时间。