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 相关文章推荐
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
JS实现拼图游戏
Jan 29 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
joomla数据库操作示例代码
2016/01/06 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
php post换行的方法
2020/02/03 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python的re正则表达式实例代码
2018/01/24 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
造价工程师个人求职信
2013/09/21 职场文书
学生档案自我鉴定
2013/10/07 职场文书
岗位职责的含义
2013/11/17 职场文书
人事科岗位职责范本
2014/03/02 职场文书
小班评语大全
2014/05/04 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技