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 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python生成随机密码的方法
2017/06/16 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
自我评价200字分享
2013/12/17 职场文书
七年级生物教学反思
2014/01/30 职场文书
班级寄语大全
2014/04/10 职场文书
贷款担保申请书
2014/05/20 职场文书
校园广播稿100字
2014/10/06 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android