为什么我的 jQuery 检查必填输入字段的脚本这么慢？

Question

我正在尝试使用 jQuery 为无法识别 required HTML 标记的浏览器检查必填字段。我的 jQuery 脚本如下。

$('div').on('submit', '#myform', function(e){     
    e.stopPropagation();
    e.preventDefault();
    $( ':input[required]').each( function (e) { 
        if ( this.value.trim() == '' ) {
            $('.error').html(this.name + " is required");
            return false;
        }       
    }); 
    $(this).unbind().submit();
 });

但是加载速度很慢！单击表单的提交按钮后，大约需要 5 秒钟才能显示错误消息！它似乎正在循环。为什么会这样？我该如何解决？

Answer 1

当您在最后一行调用 submit() 时，您创建了无限循环。

Answer 2

委托的 submit 处理程序未直接绑定到表单元素，因此您无法以这种方式解除绑定处理程序。您正在创建一个无限循环。您应该使用 off 方法并取消绑定 div 元素的处理程序。

另请注意，each 回调的返回值不会影响运行包装器、提交处理程序的流程。每个函数都有自己的返回值。

$('div').on('submit', '#myform', function(e){     
    var $e = $('.error').empty();
    var $invalids = $(':input[required]').filter( function (e) { 
        var invalid = this.value.trim().length === 0;
        if ( invalid ) {
            $e.append('<p>' + this.name + " is required</p>");
        }
        return invalid;       
    }); 
    if ( $invalids.length ) {
       return false;
    }
    this.submit();
});

HTMLFormElement 对象的 submit 方法不会触发 jQuery 提交处理程序，因此无需解除绑定处理程序。如果验证通过则表单正常提交。

性能方面你也可以避免使用 :input 选择器。来自 jQuery :input documentation:

Because :input is a jQuery extension and not part of the CSS specification, queries using :input cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :input to select elements, first select the elements using a pure CSS selector, then use .filter(":input").

HTML5 浏览器中的 elements property of the HTMLFormElement object returns a HTMLFormControlsCollection 对象和 HTML4 浏览器中的 HTMLCollection 对象包含表单元素的所有控件。您也可以使用此属性而不是查询 DOM 并使用 jQuery filter 方法过滤 required 字段：

 $(this.elements).filter('[required]');

为什么我的 jQuery 检查必填输入字段的脚本这么慢？

Why is my jQuery script for checking required input fields so slow?

javascript

jquery

validation

each

required