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 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
JavaScript简介
Feb 15 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
javascript表单正则应用
Feb 04 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
Vue.js实例方法之生命周期详解
Jul 03 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 判断数组是几维数组
2013/03/20 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
经济贸易专业自荐信
2014/06/11 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
融资合作协议书范本
2014/10/17 职场文书
应届生简历自我评价
2015/03/11 职场文书
老乡会致辞
2015/07/28 职场文书