欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JQuery.validate在ie8下不支持解决方案 - 浮叶

程序员文章站 2022-04-30 15:02:41
...
一、在ie8下回有问题的代码

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

JQuery.validate在ie8下不支持解决方案 - 浮叶
 1 form id="cardTypeFrm">
 2     table width="100%" cellspacing="0" cellpadding="0" class="table_pzh">
 3         tbody>                      
 4             tr>
 5                 th class="f14 tr pc1">用户名:th>
 6                 td>
 7                     input type="text" class="pzh_input1" id="userName" name="userName" />
 8                 td>
 9             tr>
10             tr>
11                 th class="f14 tr pc1">密码:th>
12                 td>
13                     input type="text" class="pzh_input1" id="passWord" name="passWord" />
14                 td>
15             tr>
16         tbody>
17     table>
18     p class="pc2 undis pl50 error pa" style="padding-left:118px;margin-top:-10px;" id="card_next_error">错误信息p>
19     div class="m20 tc">
20         input type="submit" id="submitCardNo" class="define_button reservation_1" value="登陆" />
21         input type="button" value="取消" class="close_button closePzh ml10" />
22     div>
23 form>
html代码

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

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

JQuery.validate在ie8下不支持解决方案 - 浮叶
 1 $(function() {
 2            initCardTypeFrmValidate()
 3            })
 4 
 5 function initCardTypeFrmValidate() {
 6 
 7     $('#cardTypeFrm').validate({
 8         onkeyup : false,
 9         onfocusout : false,
10         rules : {
11             userName : {required : true}
12             passWord : {required : true}
13         },
14 
15         messages : {
16             userName : {required : '请输入用户名'},
17             passWord : {required : '请输入密码'}
18         },
19         errorElement : "p"
20     });
21 }
js代码

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

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

1、html代码不变

 1 form id="cardTypeFrm">
 2     table width="100%" cellspacing="0" cellpadding="0" class="table_pzh">
 3         tbody>                      
 4             tr>
 5                 th class="f14 tr pc1">用户名:th>
 6                 td>
 7                     input type="text" class="pzh_input1" id="userName" name="userName" />
 8                 td>
 9             tr>
10             tr>
11                 th class="f14 tr pc1">密码:th>
12                 td>
13                     input type="text" class="pzh_input1" id="passWord" name="passWord" />
14                 td>
15             tr>
16         tbody>
17     table>
18     p class="pc2 undis pl50 error pa" style="padding-left:118px;margin-top:-10px;" id="card_next_error">错误信息p>
19     div class="m20 tc">
20         input type="submit" id="submitCardNo" class="define_button reservation_1" value="登陆" />
21         input type="button" value="取消" class="close_button closePzh ml10" />
22     div>
23 form>

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

 1 $(function() {
 2            initCardTypeFrmValidate()
 3            //优化代码
 4            $('#cardTypeFrm').submit(function() {
 5 
 6                 if ($('#cardTypeFrm').valid()) {
 7                     //通过执行的动作
 8                 }
 9                 return false;//永远禁止页面表单提交
10             })
11     })
12 
13 function initCardTypeFrmValidate() {
14 
15     $('#cardTypeFrm').validate({
16         onkeyup : false,
17         onfocusout : false,
18         rules : {
19             userName : {required : true}
20             passWord : {required : true}
21         },
22 
23         messages : {
24             userName : {required : '请输入用户名'},
25             passWord : {required : '请输入密码'}
26         },
27         errorElement : "p"
28     });
29 }