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 相关文章推荐
Maps Javascript
Jan 22 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
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
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
详解JS中的attribute属性
2017/04/25 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
Promise.all中对于reject的处理方法
2018/08/01 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
原生js检测页面加载完毕的实例
2018/09/11 Javascript
pandas 数据实现行间计算的方法
2018/06/08 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python中的类与类型示例详解
2019/07/10 Python
python 如何在测试中使用 Mock
2021/03/01 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
个人查摆剖析材料
2014/02/04 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
2014年技术部工作总结
2014/12/12 职场文书
给老婆的检讨书
2015/01/27 职场文书
2015年招生工作总结
2015/05/04 职场文书
个人收入证明范本
2015/06/12 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers