jquery validate在ie8下的bug解决方法 - Web前端
作者:98wpeu发布时间:2026-07-10分类:网页前端技术浏览:2
导读:项目用到了JQuery的表单校验插件Validate,之前一直都只是做很简单的校验,没有做过稍微复杂的应用,近期项目对应用的要求提高了,一个页面中有两个提交按钮,然后表单校验是绑定...
项目用到了JQuery的表单校验插件Validate,之前一直都只是做很简单的校验,没有做过稍微复杂的应用,近期项目对应用的要求提高了,一个页面中有两个提交按钮,然后表单校验是绑定在按钮的点击事件上的,如下。
然后很自然的就用到了插件的valid()函数:
这个确实能达到相要的效果,但是在ie8下竟然有问题,valid()方法始终返回false,而且所有的字段都会被当成必填字段校验,纠结了好久,因为jQuery的插件代码都很复杂,所以刚开始看特别费劲,后来一步一步排查,找到问题了,问题出在attributeRules()函数上:
这个函数的作用是:当你把校验规则写在页面上而不是脚本里面时,同样可以应用校验框架。技术上是很合理的,对reqUIred的处理也是合理的,但是对于ie8来说,就有点问题了。IE8会执行以下分支:
所以,所有的字段都会被当成必填字段校验了。经过测试,最后又两种方法可以解决:
第一种是在rules()方法里面找到下面这段代码,注释掉对attributeRules()的调用,之所以可以这样做,是因为一般很少会把校验写到页面中去,当然这个肯定不是最佳解决方案,那就看看第二种。
第二种解决方法需要做两件事情:首先,需要对attributeRules()方法做一些修改,把getAttribute()方法换成attr()方法。注意getAttribute()是JS方法,而attr()是jquery方法,它们的使用对象是不一样的,其实这样改完后,ie8下面的bug已经解决了,但是ie7下又出现了这种问题,所以你要用最新的jquery,我测试的时候用的是JQuery1.10.2版本。
哦,对了,最后不要忘记阻止表单的默认事件。
然后很自然的就用到了插件的valid()函数:
这个确实能达到相要的效果,但是在ie8下竟然有问题,valid()方法始终返回false,而且所有的字段都会被当成必填字段校验,纠结了好久,因为jQuery的插件代码都很复杂,所以刚开始看特别费劲,后来一步一步排查,找到问题了,问题出在attributeRules()函数上:
这个函数的作用是:当你把校验规则写在页面上而不是脚本里面时,同样可以应用校验框架。技术上是很合理的,对reqUIred的处理也是合理的,但是对于ie8来说,就有点问题了。IE8会执行以下分支:
所以,所有的字段都会被当成必填字段校验了。经过测试,最后又两种方法可以解决:
第一种是在rules()方法里面找到下面这段代码,注释掉对attributeRules()的调用,之所以可以这样做,是因为一般很少会把校验写到页面中去,当然这个肯定不是最佳解决方案,那就看看第二种。
第二种解决方法需要做两件事情:首先,需要对attributeRules()方法做一些修改,把getAttribute()方法换成attr()方法。注意getAttribute()是JS方法,而attr()是jquery方法,它们的使用对象是不一样的,其实这样改完后,ie8下面的bug已经解决了,但是ie7下又出现了这种问题,所以你要用最新的jquery,我测试的时候用的是JQuery1.10.2版本。
哦,对了,最后不要忘记阻止表单的默认事件。
- 上一篇:解决jquery操作checkbox火狐下第二次无法勾选问题 - Web前端
- 下一篇:已经是最后一篇了
相关推荐
- 解决jquery操作checkbox火狐下第二次无法勾选问题 - Web前端
- jquery ajax post提交数据乱码 - Web前端
- 自动设置iframe大小的jQuery代码 - Web前端
- jquery scroll()区分横向纵向滚动条的方法 - Web前端
- jquery中选择块并改变属性值的方法 - Web前端
- JQuery教学之性能优化 - Web前端
- 自定义jquery模态窗口插件无法在顶层窗口显示问题 - Web前端
- JQuery 文本框回车跳到下一个文本框示例代码 - Web前端
- jquery 按钮状态效果 正常、移上、按下 - Web前端
- jQuery中获取Radio元素值的方法 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery编写widget的一些技巧分享 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 9javascript原生和jquery库实现iframe自适应高度和宽度 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


