使用jquery Validate的长格式会导致IE慢脚本警告

时间:2011-05-14 02:05:19

标签: jquery validation

我一直在使用jquery validate plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/。它已经成功运行,但现在我有一个带有表格的表格,有100行左右,每行有一个输入框

http://jsfiddle.net/X8tsR/

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

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

3 个答案:

答案 0 :(得分:7)

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

较早版本的Internet Explorer没有特别快的javascript引擎,因此迭代100个输入并验证它们将花费很长时间,并且可能更长时间使用.each()等内容。即使代码在技术上运行,也需要很长时间。您可能能够做一些事情来优化您的代码,但我认为一个简单的解决方案是将事件监听器附加到每个输入,并在用户输入值时验证它们。这将具有用户的双重好处,无需滚动长格式并找到无效字段,并且它将允许浏览器一次仅验证一个框。

最后,您可能需要考虑将其分解为多步骤过程,这可能对可用性有所帮助,并且具有在用户走得太远以及发生不良事件之前保存状态的额外好处。

答案 1 :(得分:2)

Thim的回答将起到作用,这里是它的轻微修改版本。基本上,如果您要使用太多的输入字段进行验证,则使用以下代码从jquery validate plugin替换元素方法肯定会改善时间安排。

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;
        });         
    }

答案 2 :(得分:1)

我们最近遇到了类似的问题,其中一个页面包含600多个复选框。 我们找到的解决方案是重新定义&#34;元素&#34; jquery验证的功能。这种方法(我们理解)似乎负责检测表格的所有输入。然后,此输入列表用于为每个输入名称调用valid()方法。鉴于大量的复选框,这会导致巨大的开销(每个输入都会导致创建一个jquery对象)。

元素方法重新实现如下:

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;

在我们的案例中,我们使用原始元素方法从几百毫秒到使用Firefox的~10毫秒。

注意 Jquery验证版本1.11.1