jQuery验证大型表单-脚本运行缓慢
我使用的是带有jQuery 1.5的jQuery验证插件1.8.0。适用于中小型表单。对于较大的表单，性能会显著下降(即使在IE8和FF4中也是如此)，有时会导致“脚本运行速度太慢”的消息。即使您指定了自定义规则，该插件似乎也会扫描表单中的整个DOM，查找要验证的属性和类。有谁知道怎么把它完全关掉吗？还有一个ignore选项，但它仍然会扫描DOM，跳过那些使用ignore属性的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>回答 4
Stack Overflow用户
发布于 2012-01-26 04:15:53
我也一直在努力解决这个问题。通过定制一些验证，我已经能够将我在IE8中对80个验证元素的验证时间从4100ms减少到192ms。我将在这里发布我的发现，希望其他人能从中受益，也希望一些jquery-validate方面的专家会发现我的代码存在问题。
以下是我发现的一些有用的东西：
- 确保您没有任何不需要验证的验证属性。我有一些神秘的出现在元素上-我不确定为什么，但我在我的.cshtml中对它们硬编码了data-val=false以防止这种情况。
- 定义了你自己的方法来验证表单。内置在jQuery中的and执行一些非常慢的事情，并且您可能不需要它提供的所有灵活性。这是我的--使用它产生了巨大的不同(它被称为子集，因为我的表单被分成多个选项卡，随着用户的前进，我在每个选项卡上分别调用它)。
jQuery.validator.prototype.subset = function (container，validateHiddenElements) { var ok = true；var validator = this；// Performance hack -缓存错误()的值，并临时修补函数以返回缓存// (在此函数结束时恢复)。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没有指定名称”，this)；var tagName = this.tagName.toLowerCase()；if (tagName == "input“|| tagName == "select”|| tagName ==“文本区域”){ var $this = $(this)；if (!$this.hasClass('doNotValidate') && (validateHiddenElements || $this.is(‘：visible’)){ if (!validator.element($this)) ok = false；})；this.errors = errorsFunc；return ok；}；
- 在validator.settings上定义自己的showErrors方法。内置的一个为每个可验证的输入创建错误消息跨度，即使没有错误可显示。如果你有很多这样的东西，这会变得相当慢，所以你可以添加一些逻辑来避免这种情况。下面是我的：
函数showErrorsOverride() { var anyElementsNeedUpdate = false；for (var i= 0；i< this.errorList.length；i++) { if (!$(this.errorListi.element).hasClass(this.settings.errorClass)) { anyElementsNeedUpdate = true；}} for (var i= 0；i< this.successList.length；i++) { if ($(this.successListi).hasClass(this.settings.errorClass)) { anyElementsNeedUpdate =i++；}} if (anyElementsNeedUpdate) { //显示常见错误(defaultShowErrors是jQuery验证器的一部分) this.defaultShowErrors()；} }
Stack Overflow用户
发布于 2012-10-19 04:01:21
有点晚了，但对于感兴趣的人来说-与Joe的答案类似，我发现禁用defaultShowErrors()函数中的success设置很有帮助。它所做的似乎只是隐藏有效字段的错误标签，如果你没有任何错误标签，那么它就是不必要的开销。在IE8中使用55个字段将表单的速度从大约1.8秒提高到了大约260ms。
$(document).ready(function()
{
$("form").each(function ()
{
$(this).data("validator").settings.success = false;
})
});Stack Overflow用户
发布于 2011-04-05 01:58:54
我们需要更多代码来帮助您。但是遍历DOM对象是一个繁重的操作。也许对于那些大的表单，你想要使用另一种方法。如果您使用了大量的组合框和文本字段，您可以附加一个事件处理程序(在失去焦点时)，这样您就可以将值保存在javascript对象中，并在以后使用此对象来获取数据。
https://stackoverflow.com/questions/5542014
复制相似问题
腾讯云开发者
