jQuery 验证大型表单 - 脚本运行缓慢

Question

我正在使用 jQuery Validate 插件 1.8.0 和 jQuery 1.5。非常适合中小型表格。对于较大的表单，性能会显着下降(即使在 IE8 和 FF4 中也是如此)，有时会导致“脚本运行太慢”消息。看来该插件会扫描表单中的整个 DOM，查找要验证的属性和类，即使您指定了自定义规则也是如此。有人知道如何完全关闭此功能吗？还有一个忽略选项，但它仍然会扫描 DOM，跳过那些带有忽略属性的选项。

这是 ASP.NET 呈现的内容，但有大约 120 行数据。遗憾的是，无法对结果进行分页。

<table id="GridView1">
    <tbody>
        <tr>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3</th>
            <th scope="col">Header 4</th>
            <th scope="col">Header 5</th>
            <th scope="col">Header 6</th>
            <th style="width: 60px; white-space: nowrap" scope="col">Header 7</th>
            <th style="width: 60px; white-space: nowrap" scope="col">Header 8</th>
        </tr>        
        <tr class="gridRow" jquery1507811088779756411="3">
            <td style="width: 50px" align="middle">
                <span id="GridView1_ctl03_Label1">XXX</span>
            </td>
            <td>
                <span id="GridView1_ctl03_Label2">YYY</span>
            </td>
            <td style="width: 50px" align="middle">
                <span id="GridView1_ctl03_Label3">ZZZ</span>
            </td>
            <td align="middle">
                <select style="width: 70px" id="GridView1_ctl03_Dropdown4" name="GridView1$ctl03$Dropdown4">
                    <option selected value="Y">Y</option>
                    <option value="N">N</option>
                </select>
            </td>
            <td style="width: 50px" align="middle">
                <input id="GridView1_ctl03_hidId1" value="100" type="hidden" name="GridView1$ctl03$hidId1" />
                <input id="GridView1_ctl03_hidId2" value="100" type="hidden" name="GridView1$ctl03$hidId2" />
                <input id="GridView1_ctl03_hidId3" value="100" type="hidden" name="GridView1$ctl03$hidId3" />
                <input id="GridView1_ctl03_hidId4" value="100" type="hidden" name="GridView1$ctl03$hidId4" />
                <select style="width: 40px" id="GridView1_ctl03_Dropdown5" name="GridView1$ctl03$Dropdown5">
                    <option selected value="A">A</option>
                    <option value="B">B</option>
                </select>
            </td>
            <td style="width: 50px" align="middle">
                <span id="GridView1_ctl03_Label6">101</span>
            </td>
            <td align="middle">
                <input style="width: 60px" id="GridView1_ctl03_Textbox8" class="date required"
                    title="Please enter a valid start date." type="text" name="GridView1$ctl03$Textbox8"
                    jquery1507811088779756411="122" />
            </td>
            <td align="middle">
                <input style="width: 60px" id="GridView1_ctl03_Textbox9" class="date"
                    title="Please enter a valid end date." type="text" name="GridView1$ctl03$Textbox9"
                    jquery1507811088779756411="123" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

我也一直在为这个问题苦苦挣扎。通过自定义一些验证，我已经能够将 IE8 中 80 个验证元素的验证时间从 4100 毫秒减少到 192 毫秒。我将在这里发布我的发现，希望其他人能够受益，也希望 jquery-validate 方面的一些专家能够发现我的代码存在问题。

以下是我发现有用的一些内容:

1. 确保您对实际上不需要验证的任何内容都没有验证属性。我有一些神秘地出现在元素上 - 我不确定为什么，但我在 .cshtml 中对它们进行了硬编码 data-val=false 以防止这种情况发生。

2. 定义您自己的方法来验证表单。 jQuery 中内置的函数执行一些操作非常缓慢，并且您可能不需要它提供的所有灵 active 。这是我的 - 使用它产生了巨大的差异(它被称为子集，因为我的表单被分成选项卡，并且当用户前进时我在每个选项卡 div 上单独调用它)。

   jQuery.validator.prototype.subset = function (container, validateHiddenElements) {
       var ok = true;
       var validator = this;
   
       // Performance hack - cache the value of errors(), and temporarily patch the    function to return the cache
       // (it is restored at the end of this function).
       var errors = this.errors();
       var errorsFunc = this.errors;
       this.errors = function () { return errors; };
   
       $(container.selector + " [data-val=true]").each(function () {
   
           !this.name && validator.settings.debug && window.console && console.error("%o has no name assigned", this);
   
           var tagName = this.tagName.toLowerCase();
           if (tagName == "input" || tagName == "select" || tagName == "textarea") {
               var $this = $(this);
   
               if (!$this.hasClass('doNotValidate') &&
                   (validateHiddenElements || $this.is(':visible'))) {
   
                   if (!validator.element($this)) ok = false;
   
               }
           }
       });
   
       this.errors = errorsFunc;
   
       return ok;
   };
   

3. 在 validator.settings 上定义您自己的 showErrors 方法。即使没有要显示的错误，内置的也会为每个可验证的输入创建错误消息范围。如果你有很多这样的东西，这会变得相当慢，所以你可以添加一些逻辑来避免这种情况。这是我的:

   function showErrorsOverride() {
       var anyElementsNeedUpdate = false;
       for (var i = 0; i < this.errorList.length; i++) {
           if (!$(this.errorList[i].element).hasClass(this.settings.errorClass)) {
           anyElementsNeedUpdate = true;
           }
       }
       for (var i = 0; i < this.successList.length; i++) {
           if ($(this.successList[i]).hasClass(this.settings.errorClass)) {
               anyElementsNeedUpdate = true;
           }
       }
   
   
       if (anyElementsNeedUpdate) 
       {
           // show the usual errors (defaultShowErrors is part of the jQuery validator)
           this.defaultShowErrors();
       }
   }