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

前端技术 2023/09/07 JavaScript

一、在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下不支持的快速解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/18387

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案