最近在项目中有遇到一个Form表单中有200多个标签。在提交表单时网页会出现等待时间很长,甚至会出现网页奔溃的情况。

主要的原因是因为在使用jQuery.Validate.js进行Form验证的时候会花销大量时间。这些时间主要用在两个地方:

1.表单中标签的检查对应jQuery.Validate.js中checkForm()方法。

2.检查完标签后需要显示错误或成功信息对应jQuery.Validate.js中ShowErrors()方法。

先前我们是用的jQuery.Validate.js-1.8.0版本,我更新到最新的jQuery.Validate.js-1.15.1版本,发现验证时间没有得到明显的优化。

反而会与之前的版本会有冲突,冲突的地方在无法验证隐藏的控件,例如用了第三方的HTML编辑框插件,后面会隐藏一个textarea控件,之前低版本的会检测到这个,但是新版本的会忽略。问题在于新版本的js默认会跳过页面中不可见的元素。

1.8.0版本的ignore:[] 这里改为“.hidden”在checkForm()时会默认过滤掉页面中所有的不可见元素。

这是1.15.1种checkForm的方法:

checkForm: function() {this.prepareForm();for ( var i = 0, elements = ( this.currentElements = this.elements() ); elements[ i ]; i++ ) {this.check( elements[ i ] );}return this.valid();},

elements: function() {var validator = this,rulesCache = {};// Select all valid inputs inside the form (no submit or reset buttons)return $( this.currentForm ).find( "input, select, textarea, [contenteditable]" ).not( ":submit, :reset, :image, :disabled" ).not( this.settings.ignore )//在这个地方会对隐藏元素进行过滤,返回的elements会少了很多隐藏的元素。.filter( function() {var name = this.name || $( this ).attr( "name" ); // For contenteditableif ( !name && validator.settings.debug && window.console ) {console.error( "%o has no name assigned", this );}// Set form expando on contenteditableif ( this.hasAttribute( "contenteditable" ) ) {this.form = $( this ).closest( "form" )[ 0 ];}// Select only the first element for each name, and only those with rules specifiedif ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {return false;}rulesCache[ name ] = true;return true;} );},

这种处理的确可以减少很多不必要元素的check。但是经过测试这里的时间提升并不是十分明显。

但是这样处理后反而使得项目出现了不兼容的问题,因为像HTML编辑框等需要验证的背后隐藏元素也会被隐藏。

出于项目的需要,这里我将这个参数defaults中的ignore参数改为了input[type="hidden"]这样解决了兼容的问题。因为这个只对<input>标签中设置了"type=hidden"的元素忽略检查。

说了这么多并没有提到如何提升验证性能的方面。下面讨论下,由于本人也是小菜,希望大神勿喷。

上面有提到验证所花销的时间主要花在两个函数上,那么我们就从这两个函数说起:

1.checkForm().

从上面其实我们已经看出来了,将ignore设置值从而过滤掉一些隐藏的元素本身就是一种对checkForm()函数执行的优化。但是这里并没有起到实质性的作用,因为往往表单中隐藏的元素其实并不是很多,想要得到更大的提升应该是把页面中显示出来但是又不需要验证的标签进行过滤,真正做到只去check需要check的标签元素。这里网上有一种方法就是给每个不需要Check的元素标签添加一个类似于“class='validate-ignore'”这样的类,然后在elements()方法中把这样不需要验证的元素也过滤掉。这种做法我并没有去实践,因为项目中表单太多,这样一个个去添加新的class显的有点不现实。有兴趣的朋友可以去研究一下。

2.showErrors().

这个方法之所以会花销大量的时间。因为这个方法会使得HTML DOM树发生改变,来显示和修改错误或正确的提示信息。

原生的showErrors方法如下

默认页面中每个需要验证的elment都会经过这个else分支去执行defaultShowErrors()函数,而这个函数就是改变DOM树结构的入口。所以我们在这里新增一个判断的逻辑会提升不少的时间。新增判断如下:

showErrors: function( errors ) {if ( errors ) {var validator = this;// Add items to error list and map$.extend( this.errorMap, errors );this.errorList = $.map( this.errorMap, function( message, name ) {return {message: message,element: validator.findByName( name )[ 0 ]};} );// Remove items from success listthis.successList = $.grep( this.successList, function( element ) {return !( element.name in errors );} );}if ( this.settings.showErrors ) {this.settings.showErrors.call( this, this.errorMap, this.errorList );} else {var anyElementsNeedUpdate = false; //参数表示是否需要去更新DOM树中的元素for (var i = 0; i < this.errorList.length; i++) {if (!$(this.errorList[i].element).hasClass(this.settings.errorClass)) {anyElementsNeedUpdate = true;//1.当之前验证有错误的元素已经修改正确即没有了这个errorClass,需要去更新elementbreak;}}if (!anyElementsNeedUpdate) {for (var i = 0; i < this.successList.length; i++) {if ($(this.successList[i]).hasClass(this.settings.errorClass)) {anyElementsNeedUpdate = true;//2.当之前验证成功的元素现在含有这个errorClass,需要去更新elementbreak;}}}if (anyElementsNeedUpdate) {//如果有上面两种情况之一都需要去更新DOM元素,否则不应该去调用defaultShowErrors();this.defaultShowErrors();}}},

从这个可以明显的看出,checkForm()函数时间没有太大的变化。但是showErrors()时间变成了之前的十分之一。

经过测试这个修改对验证功能是没有影响的,而且性能也提升了不少。

参考:http://stackoverflow.com/questions/5542014/jquery-validate-large-forms-script-running-slowly。

转载于:https://www.cnblogs.com/dennis0525/p/5981752.html

jQuery.Validate.js验证大表单的优化相关推荐

  1. 使用jquery validate结合zui作表单验证

    1.引入jquery validate和zui <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) --> <script src="${_b ...

  2. 使用jquery.form.js实现form表单无刷新提交简单示例

    2019独角兽企业重金招聘Python工程师标准>>> 直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代 ...

  3. servlet html js提交表单,使用jquery.form.js实现form表单无刷新提交简单示例

    直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单! Servlet代码: package com.pro ...

  4. 企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证

    引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, ...

  5. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js 1 <scrip ...

  6. jQuery Validate.js验证手机号码。

    html: <div class="edit_phone1 tis_edit"> <form id="cell" class="fo ...

  7. jQuery表单校验jquery.validate.js的使用

    jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...

  8. jQuery(六)插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总

    jQuery(六)插件.Validate验证提交表单.submitHandler.更改错误信息显示的位置.required.Validator.内置验证方式表.validate ()的可选项汇总 文章 ...

  9. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

      方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...

  10. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

最新文章

  1. VS2010 error RC2170: bitmap file xxx.png is not in 3.00 format
  2. 搬家Testing.
  3. Python中的序列操作
  4. Git 使用的问题总结
  5. UVa 706 ZOJ 1146 LC-Display
  6. 关于js对象添加属性
  7. NOI08冬令营 数据结构的提炼与压缩
  8. Java Web开发的轻便架构Tapestry5---简介
  9. emp和emn是什么文件_emn格式文件
  10. 计算机维修兴趣小组,计算机兴趣小组章程
  11. x509证书、openssl、go生成证书
  12. 转:如何理解阿里月饼事件中各方的表现
  13. Microsoft Dynamics 365咨询服务研究报告-Microsoft Dynamics 365咨询服务生产基地、总部、竞争对手及市场地位
  14. 安装gms 的拨号盘
  15. 信用卡智能还款是什么,靠不靠谱?
  16. 《深入理解计算机系统》(CSAPP)实验七 —— Malloc Lab
  17. 快捷键Ctrl+ Shift+ L就可以进入多行同时编辑模式了
  18. 计算机英语2000字论文范文,★计算机专业英语论文参考文献_计算机专业英语参考资料范文_计算机专业英语外文参考文献...
  19. 华为服务器查看虚拟ip,服务器判断虚拟ip
  20. 就光会拉个数,要你数据分析师有何用? by彭文华

热门文章

  1. Eclipse的工作空间与项目
  2. 轻松看懂概率论与图论基础数学知识
  3. 计算机视觉实战(十一)Scale Invariant Feature Transform(SIFT)(附完整代码)
  4. Windows中绕过更新直接关机
  5. C++ 中的深拷贝与浅拷贝
  6. script标签的使用,从零开始
  7. [Flex] flex的安全沙箱,你保障了安全的同时也害苦了多少我这样的人那
  8. c/c++线性循环队列
  9. No.1 - 制作一个简单的菜单动画效果---百度IFE
  10. Android中Activity的四大启动模式实验简述