jquery validate在ie8下的bug解决方法

项目用到了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版本。
 
哦，对了，最后不要忘记阻止表单的默认事件。

赞 (0)

相关推荐

  • jquery内置验证(validate)使用方法示例(表单验证)

    (1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性(7)number:true 必须输入合法的数字(负数,小数)(8)

  • JQuery扩展插件Validate—6 radio、checkbox、select的验证

    JQuery扩展插件Validate—6 radio、checkbox、select的验证

    效果如下所示: 解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法, //验证

  • Jquery Validate 正则表达式实用验证代码大全

    手机号码验证 以下为引用内容: 复制代码 代码如下: jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ return this.optional(element) || (length == 11 && mobile.test(valu

  • jquery validate添加自定义验证规则(验证邮箱 邮政编码)

    jQuery:validate添加自定义验证 jQuery.validator.addMethod添加自定义的验证规则 addMethod:name, method, message 简单实例:单个验证的添加 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • jQuery插件Validate实现自定义校验结果样式

    jQuery插件Validate实现自定义校验结果样式

    本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码,分享给大家供大家参考,具体内容如下 效果如下: 具体步骤: 1.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/ja

  • jQuery验证插件 Validate详解

    jQuery验证插件 Validate详解

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • 使用jquery.validate自定义方法实现

    使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证

    最近项目开发中遇到这样的需求"手机号码或者固话至少填写一个",如下图所示: 项目采用的jquery.validate.js验证组件,目前组件不支持这种"或"逻辑的验证,于是就自己定义一个 jQuery.validator.addMethod("phone", function(value, element) { var mobile = $("#mobile").val();// 手机号码 var telephone = $(

  • jQuery.Validate验证库的使用介绍

    jQuery.Validate验证库的使用介绍

    jQuery.Validate验证库1.下载jquery.validate,这里我提供jquery-validation-1.9.0,点击下载 默认校验规则 复制代码 代码如下: (1)required:true               必输字段(2)remote:"check.php"          使用ajax方法调用check.php验证输入值(3)email:true                  必须输入正确格式的电子邮件(4)url:true          

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框

    用 $.fn.validatebox.defaults 重写了 defaults. 用法 复制代码 代码如下: <input id="vv" required="true" validType="email"> 复制代码 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email

随机推荐