JAVA高级面试进阶训练营视频教程

admin

一、在ie8下回有问题的代码

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

 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事件代码如下

 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 }