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 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
js css+html实现简单的日历
Jul 14 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
JS实现公告上线滚动效果
Jan 10 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php printf输出格式使用说明
2010/12/05 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
JS正则表达式验证密码强度
2020/03/18 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
用Python实现数据的透视表的方法
2018/11/16 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
大学毕业生通用自我评价
2014/01/05 职场文书
大学新生欢迎词
2014/01/10 职场文书
海洋科学专业求职信
2014/08/10 职场文书
2014年班干部工作总结
2014/11/25 职场文书
实习单位指导教师评语
2014/12/30 职场文书
导游词幽默开场白
2019/06/26 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书