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选择没有colspan属性的td的代码
Jul 06 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
浅谈Vue.js
Mar 02 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
js+html获取系统当前时间
Nov 10 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
vue resource发送请求的几种方式
Sep 30 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php实现短信发送代码
2015/07/05 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
Python全局变量操作详解
2015/04/14 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
python3中的md5加密实例
2018/05/29 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python自动发送邮件脚本
2018/06/20 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Python字典实现伪切片功能
2020/10/28 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
Java程序员面试题
2016/09/27 面试题
《音乐之都维也纳》教学反思
2014/04/16 职场文书
食品卫生管理制度
2015/08/06 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis