jquery validate在ie8下的bug解决方法


Posted in Javascript onNovember 13, 2013

项目用到了jquery的表单校验插件validate,之前一直都只是做很简单的校验,没有做过稍微复杂的应用,近期项目对应用的要求提高了,一个页面中有两个提交按钮,然后表单校验是绑定在按钮的点击事件上的,如下。
jquery validate在ie8下的bug解决方法 
然后很自然的就用到了插件的valid()函数:
jquery validate在ie8下的bug解决方法 
这个确实能达到相要的效果,但是在ie8下竟然有问题,valid()方法始终返回false,而且所有的字段都会被当成必填字段校验,纠结了好久,因为jquery的插件代码都很复杂,所以刚开始看特别费劲,后来一步一步排查,找到问题了,问题出在attributeRules()函数上:
jquery validate在ie8下的bug解决方法 
这个函数的作用是:当你把校验规则写在页面上而不是脚本里面时,同样可以应用校验框架。技术上是很合理的,对required的处理也是合理的,但是对于ie8来说,就有点问题了。ie8会执行以下分支:
jquery validate在ie8下的bug解决方法 
所以,所有的字段都会被当成必填字段校验了。经过测试,最后又两种方法可以解决:

第一种是在rules()方法里面找到下面这段代码,注释掉对attributeRules()的调用,之所以可以这样做,是因为一般很少会把校验写到页面中去,当然这个肯定不是最佳解决方案,那就看看第二种。
jquery validate在ie8下的bug解决方法 
第二种解决方法需要做两件事情:首先,需要对attributeRules()方法做一些修改,把getAttribute()方法换成attr()方法。注意getAttribute()是js方法,而attr()是jquery方法,它们的使用对象是不一样的,其实这样改完后,ie8下面的bug已经解决了,但是ie7下又出现了这种问题,所以你要用最新的jquery,我测试的时候用的是jquery1.10.2版本。
jquery validate在ie8下的bug解决方法 
哦,对了,最后不要忘记阻止表单的默认事件。

Javascript 相关文章推荐
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
JQuery伸缩导航练习示例
Nov 13 #Javascript
JS:window.onload的使用介绍
Nov 13 #Javascript
JQuery each打印JS对象的方法
Nov 13 #Javascript
Jquery 数组操作大全个人总结
Nov 13 #Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 #Javascript
js 判断上传文件大小及格式代码
Nov 13 #Javascript
php跨域调用json的例子
Nov 13 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php smarty的预保留变量总结
2008/12/04 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP错误处理函数
2016/04/03 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
php中的登陆login实例代码
2016/06/20 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python聊天室实例程序分享
2016/01/05 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python 文件操作删除某行的实例
2017/09/04 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
借条格式范本
2015/05/25 职场文书
党支部鉴定意见
2015/06/02 职场文书
舞出我人生观后感
2015/06/16 职场文书