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 相关文章推荐
jquery png 透明解决方案(推荐)
Aug 21 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
解决vue 引入子组件报错的问题
Sep 06 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
如何选购合适的收音机
2021/03/01 无线电
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python可视化实现代码
2019/01/15 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
装潢设计专业推荐信模板
2013/11/26 职场文书
质检部部长职责
2013/12/16 职场文书
室内拓展活动方案
2014/02/13 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Python Django ORM连表正反操作技巧
2021/06/13 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers