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随便控制任意div隐藏的方法
Jun 28 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
浅入深出Vue之组件使用
Jul 11 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 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/06/08 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
java判断三位数的实例讲解
2019/06/10 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python 图像增强算法实现详解
2021/01/24 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
考试没考好检讨书
2014/01/31 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
通讯稿格式及范文
2015/07/22 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android