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中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
vue 解决provide和inject响应的问题
Nov 12 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数组删除元素示例
2014/03/21 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
vue如何截取字符串
2019/05/06 Javascript
python避免死锁方法实例分析
2015/06/04 Python
django实现用户登陆功能详解
2017/12/11 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
期末考试复习计划
2015/01/19 职场文书
北京导游词
2015/02/12 职场文书