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 相关文章推荐
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
vue 实现input表单元素的disabled示例
Oct 28 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
详解如何修改 node_modules 里的文件
May 22 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
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP加密技术的简单实现
2016/09/04 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
Javascript注入技巧
2007/06/22 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python 文件操作实现代码
2009/10/07 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
教师爱岗敬业演讲稿
2014/05/05 职场文书
大学生见习报告范文
2014/11/03 职场文书
财产保全担保书
2015/01/20 职场文书
高中班长竞选稿
2015/11/20 职场文书
六五普法心得体会2016
2016/01/21 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
Python实现排序方法常见的四种
2021/07/15 Python