使用 jquery Validate 的长表单导致 IE 缓慢脚本警告

Question

我一直在使用 jquery 验证插件 http://bassistance.de/jquery-plugins/jquery -插件验证/。它一直工作成功，尽管现在我有一个带有表格的表单，大约有 100 行，每个行都有一个输入框

http ://jsfiddle.net/X8tsR/

这会导致 IE 中出现“此页面上的脚本导致 Internet Explorer 运行缓慢”警告。

我想知道我的实现是否存在问题，或者期望此验证脚本在这么多内容上运行是否不合理？

Answer 1

页面是单线程的，因此长时间运行的脚本将导致页面锁定。像 Internet Explorer 这样的浏览器对整个浏览器使用单个线程，因此这意味着整个浏览器将变得无响应。作为解决方案，浏览器将停止似乎花费太长时间的代码，并询问用户是否希望脚本继续运行。

旧版本的 Internet Explorer 没有特别快的 JavaScript 引擎，因此迭代 100 个输入并验证它们将需要很长时间，对于 .each() 之类的东西可能需要更长的时间。即使代码在技术上可以运行，但也需要很长时间。您也许可以做一些事情来优化您的代码，但我认为一个简单的解决方案是将事件侦听器附加到每个输入，并在用户输入值时验证它们。这将带来双重好处，即用户不必滚动长表单并查找无效字段，并且允许浏览器一次仅验证一个框。

最后，您可能需要考虑将其分解为一个多步骤过程，这可能有助于提高可用性，并且具有在用户走得太远并发生不良情况之前保存状态的额外好处。

Answer 2

蒂姆的答案就可以了，这里是稍加修改的版本。基本上，如果您有太多的输入字段需要验证，那么用下面的代码替换 jquery 验证插件中的 elements 方法肯定会改善计时。

elements: function() {            
        var ret = [];
        var form = $(this.currentForm);
        for (var inputName in this.settings.rules) {                
            var inputs = form.find("input[name='" + inputName + "'], select[name='" + inputName + "'], textarea[name='" + inputName + "']");
            if (inputs.length > 0) {                    
                ret.push(inputs[0]);
            }
        }   
        /*You can comment below code if you're adding required rules explicitly*/           
        var _required = form.find(".required");         
        for (var i = 0; i < _required.length ; i++)
            ret.push(_required[i]);

        /*if you don't do this, you may encounter an error*/    
        return $(ret).map(function () {
            return this;
        });         
    }

Answer 3

最近，我们在包含 600 多个复选框的页面上遇到了类似的问题。
我们找到的解决方案是重新定义jquery validate的“elements”函数。这种方法（据我们所知）似乎负责检测表单的所有输入。然后使用此输入列表为每个输入名称调用 valid() 方法。考虑到复选框数量巨大，这会导致巨大的开销（每个输入都会创建一个 jquery 对象）。

elements 方法重新实现如下：

var ret=[];
var form=$(this.currentForm);
for(var inputName in this.settings.rules){
    var inputs=form.find("[name='"+inputName+"']");
    if(inputs.length>0){
        console.log("Found input name: "+inputName);
        ret.push(inputs[0]);
    }
 }
 return ret;

在我们的例子中，我们从原始 elements 方法的几百毫秒缩短到 Firefox 的约 10 毫秒。

注意 Jquery验证版本1.11.1