jQueryvalidation大型表单 – 脚本运行缓慢
我正在使用带有jQuery 1.5的jQuery Validate插件1.8.0。 适用于中小型表格。 对于较大的表单，性能会显着下降（即使在IE8和FF4中），有时会导致“脚本运行速度太慢”消息。 即使您指定了自定义规则，该插件似乎也会扫描表单中的整个DOM，以查找要validation的属性和类。 任何人都知道如何完全关闭它？ 还有一个忽略选项，但它仍然会扫描DOM，跳过那些忽略attr。
这是ASP.NET呈现的内容，除了大约120行数据。 不幸的是，分析结果不是一种选择。
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 XXX YYY ZZZ Y N A B 101
我也一直在努力解决这个问题。 通过自定义一些validation，我已经能够在IE8中减少80个validation元素的validation时间，从4100ms到192ms。 我将在此发布我的发现，希望其他人可以受益，并希望jquery-validate中的某位专家会发现我的代码存在问题。
以下是我发现有用的一些内容：
- 确保您没有实际需要validation的任何内容的validation属性。 我有一些神秘的元素出现 – 我不知道为什么，但我在.cshtml中硬编码data-val = false以防止这种情况。
-
定义自己的方法来validation表单。 jQuery中内置的内容非常缓慢，并且您可能不需要它提供的所有灵活性。 这是我的 – 使用它产生了巨大的差异（它被称为子集，因为我的表单被分成了标签，我在每个标签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; }; -
在validator.settings上定义自己的showErrors方法。 即使没有要显示的错误，内置的也会为每个可validation的输入创建错误消息跨度。 如果你有很多这样的话，这会很慢，所以你可以添加一些逻辑来避免这种情况。 这是我的：
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(); } }
派对有点晚了，但对于任何感兴趣的人 – 类似于Joe的回答，我发现从defaultShowErrors（）函数禁用成功设置会有所帮助。 它似乎只是隐藏有效字段的错误标签，如果您没有任何错误标签，那么这是不必要的开销。 在IE8中加速我的表格，从大约1.8秒到大约260毫秒的55个字段。
$(document).ready(function() { $("form").each(function () { $(this).data("validator").settings.success = false; }) });
我们需要更多代码来帮助您。 但遍历DOM对象是一项繁重的操作。 也许对于那些大型表格你想要使用另一种方法。 如果您使用了很多组合和文本字段，则可以附加事件处理程序（在丢失焦点上），这样您就可以将值保存在javascript对象中，然后使用此对象来获取数据。
我们有大型的类似问题，但发现了以下解决方案。 现在我们的大型表格（> 600输入）在~10ms内validation。
我在这里发布了答案： https ： //stackoverflow.com/a/23132844/1821717