jQuery验证大表格-脚本运行缓慢 [英] jQuery validate large forms - script running slowly
问题描述
我正在将jQuery Validate插件1.8.0与jQuery 1.5一起使用.适用于中小型表格.对于较大的窗体，性能会大大降低(甚至在IE8和FF4中也是如此)，有时会导致脚本运行太慢"消息.看起来，即使您指定了自定义规则，该插件也会扫描表单中的整个DOM，以查找要验证的属性和类.有人知道如何完全关闭此功能吗?也有一个ignore选项，但是它仍然会扫描DOM，并跳过带有ignore attr的内容.
I'm using jQuery Validate plugin 1.8.0 with jQuery 1.5. Works great for small to medium sized forms. For larger forms the performance degrades significantly (even in IE8 and FF4), sometimes causing the "script is running too slowly" message. It appears that the plugin scans the entire DOM within the form looking for attributes and classes to validate, even if you specified custom rules. Anyone know how to turn this off completely? There is an ignore option as well, but it still would scan the DOM, skipping those with the ignore attr.
这是ASP.NET呈现的内容，除了大约有120行数据.遗憾的是，无法分页结果.
Here is what ASP.NET renders, except there are about 120 rows of data. Paging the results is not an option, unfortunately.
<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>
推荐答案
我也一直在努力解决这个问题.通过自定义一些验证，我已经能够将IE8中80个验证元素的验证时间从4100ms减少到192ms.我将在这里发表我的发现，希望其他人可以受益，也希望一些jquery-validate专家会发现我的代码有问题.
I've been struggling with this issue as well. By customizing some of the validation, I've been able to reduce my validation time in IE8 for 80 validating elements from 4100ms to 192ms. I'll post my findings here in the hope that others can benefit, and also in the hope that some expert in jquery-validate will find a problem with my code.
有些东西对我有帮助:
- 请确保您对实际上不需要验证的任何内容都没有验证属性.我在元素上有些神秘的显示-我不确定为什么，但是我在.cshtml中对它们进行了硬编码data-val = false来防止这种情况.
-
定义您自己的方法以验证表单.内置于jQuery的代码执行速度非常慢，因此您可能并不需要它提供的所有灵活性.这是我的-使用它带来了很大的不同(之所以称为子集，是因为我的表单被分成多个选项卡，并且随着用户的前进，我在每个选项卡div上分别称呼它.)
- Make sure you don't have validation attributes on anything you don't actually need to validate. I had some mysteriously showing up on elements - I'm not sure why, but I hard-coded data-val=false on them in my .cshtml to prevent this.
Define your own method to validate the form. The one built in to jQuery does a couple things very slowly, and you likely don't need all the flexibility it provides. Here is mine - using this made a HUGE difference (it's called subset because my form is split up into tabs and I call this on each tab div individually as the user advances).
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;
};
在validator.settings上定义自己的showErrors方法.即使没有错误要显示，内置的代码也会为每个有效输入创建错误消息范围.如果您有很多这样的话，这会变得很慢，因此您可以添加一些逻辑来避免这种情况.这是我的:
Define your own showErrors method on validator.settings. The built-in one creates error message spans for each validatable input even when there is no error to display. This gets quite slow if you have a lot of these, so you can add some logic to avoid this. Here is mine:
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();
}
}
这篇关于jQuery验证大表格-脚本运行缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
