JQuery.validate在ie8下不支持的快速解决方法


Posted in Javascript onMay 18, 2016

一、在ie8下回有问题的代码

1、JQuery.validate验证框架是通过页面form表单提交验证<input/>标签中输入是否符合自己的规则的

<form id="cardTypeFrm">
  <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh">
    <tbody>           
      <tr>
        <th class="f14 tr pc1">用户名:</th>
        <td>
          <input type="text" class="pzh_input1" id="userName" name="userName" />
        </td>
      </tr>
      <tr>
        <th class="f14 tr pc1">密码:</th>
        <td>
          <input type="text" class="pzh_input1" id="passWord" name="passWord" />
        </td>
      </tr>
    </tbody>
  </table>
  <p class="pc2 undis pl50 error pa" style="padding-left:118px;margin-top:-10px;" id="card_next_error">错误信息</p>
  <div class="m20 tc">
    <input type="submit" id="submitCardNo" class="define_button reservation_1" value="登陆" />
    <input type="button" value="取消" class="close_button closePzh ml10" />
  </div>
</form>

其中 name属性和下面js中的rules中的属性一致

2、js绑定validate事件代码如下

$(function() {
      initCardTypeFrmValidate()
      })

function initCardTypeFrmValidate() {

  $('#cardTypeFrm').validate({
    onkeyup : false,
    onfocusout : false,
    rules : {
      userName : {required : true}
      passWord : {required : true}
    },

    messages : {
      userName : {required : '请输入用户名'},
      passWord : {required : '请输入密码'}
    },
    errorElement : "p"
  });
}

onkeyup : false,表示键盘输入不验证,默认true
onfocusout : false,表示输入框失去焦点不验证,默认true

二、解决方案是,禁止页面的表单提交,实行js中绑定表单提交表单

1、html代码不变

<form id="cardTypeFrm">
  <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh">
    <tbody>           
      <tr>
        <th class="f14 tr pc1">用户名:</th>
        <td>
          <input type="text" class="pzh_input1" id="userName" name="userName" />
        </td>
      </tr>
      <tr>
        <th class="f14 tr pc1">密码:</th>
        <td>
          <input type="text" class="pzh_input1" id="passWord" name="passWord" />
        </td>
      </tr>
    </tbody>
  </table>
  <p class="pc2 undis pl50 error pa" style="padding-left:118px;margin-top:-10px;" id="card_next_error">错误信息</p>
  <div class="m20 tc">
    <input type="submit" id="submitCardNo" class="define_button reservation_1" value="登陆" />
    <input type="button" value="取消" class="close_button closePzh ml10" />
  </div>
</form>

2、js代码中加入绑定提交事件

$(function() {
      initCardTypeFrmValidate()
      //优化代码
      $('#cardTypeFrm').submit(function() {

        if ($('#cardTypeFrm').valid()) {
          //通过执行的动作
        }
        return false;//永远禁止页面表单提交
      })
  })

function initCardTypeFrmValidate() {

  $('#cardTypeFrm').validate({
    onkeyup : false,
    onfocusout : false,
    rules : {
      userName : {required : true}
      passWord : {required : true}
    },

    messages : {
      userName : {required : '请输入用户名'},
      passWord : {required : '请输入密码'}
    },
    errorElement : "p"
  });
}

以上这篇JQuery.validate在ie8下不支持的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
详解javascript函数的参数
Nov 10 Javascript
js模块加载方式浅析
Aug 12 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 #Javascript
JQuery解析XML数据的几个简单实例
May 18 #Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 #Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 #Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 #Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 #Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 #Javascript
You might like
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
常用的jQuery前端技巧收集
2014/12/24 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python实现的生成格雷码功能示例
2018/01/24 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python和c语言的主要区别总结
2019/07/07 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
司机检讨书
2014/02/13 职场文书
经典广告词大全
2014/03/14 职场文书
主题班会演讲稿
2014/05/22 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL