javascript - 为什么我用于检查必填输入字段的 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

委托(delegate)的 submit 处理程序没有直接绑定(bind)到表单元素，因此您不能以这种方式解除绑定(bind)处理程序。您正在创建一个无限循环。您应该使用 off 方法并解除绑定(bind) 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 提交处理程序，因此无需取消绑定(bind)处理程序。如果验证通过，则正常提交表单。

在性能方面，您还可以避免使用 :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").

elements HTMLFormElement 对象的属性返回 HTMLFormControlsCollection HTML5 浏览器中的对象和 HTML4 浏览器中的 HTMLCollection 对象包含表单元素的所有控件。您还可以使用此属性而不是查询 DOM，并使用 jQuery filter 方法来过滤 required 字段:

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