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 相关文章推荐
yepnope.js使用详解及示例分享
Jun 23 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
工作中常用js功能汇总
Nov 07 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验证码代码
2012/02/27 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
layui分页效果实现代码
2017/05/19 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
如何编写python的daemon程序
2021/01/07 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
离职感谢信
2015/01/21 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
如何写好开幕词?
2019/06/24 职场文书