为什么我的jQuery脚本检查所需的输入字段如此之慢？

我正在尝试使用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处理程序不直接绑定到表单元素，因此您无法以这种方式取消绑定处理程序。 你正在创建一个无限循环。 您应该使用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('
' + this.name + " is required
"); } return invalid; }); if ( $invalids.length ) { return false; } this.submit(); }); 

HTMLFormElement对象的submit方法不会触发jQuery提交处理程序，因此不需要取消绑定处理程序。 如果validation通过，则表格正常提交。

在性能方面，您还可以避免使用:input选择器。 来自jQuery :input文档 ：

因为:input是jQuery扩展而不是CSS规范的一部分，使用:input查询无法利用本机DOM querySelectorAll()方法提供的性能提升。 要在使用时获得最佳性能:input选择元素，首先使用纯CSS选择器选择元素，然后使用.filter(":input") 。

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

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

Answer 2

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