jquery.validate1.9.0前台驗證使用

標籤：blog   http   使用   os   io   strong   for   ar   

一、利用jquery.form外掛程式提交表單方法使用jquery.validate外掛程式

現象：當提交表單時，即使前台未驗證通過，也照常提交表單。

解決辦法：

 

[php] view plaincopy 

1. $(‘#myForm‘).submit(function(){  
2.     if (!$(this).valid()) return false;//加上此句OK  
3.     $(‘.error‘).html(‘‘);  
4.     $("#go").prop("disabled",true);  
5.     $(this).ajaxSubmit({  
6.         type:"POST",  
7.         //beforeSubmit: showRequest,  
8.         dataType:‘json‘,  
9.         success: showResponse  
10.     });  
11.     return false;  
12. });  

相關說明：

 

定製提交方式(ajax提交)
如果使用ajax方式提交，那請採用如下兩種方式和校正架構結合
1)、使用submitHandler屬性配置ajax提交，submithandler：當表單全部校正通過之後會回調配置的代碼，此處也就是當校正通過之後調用ajax提交。
2)、使用valid方法，監聽form的submit事件，當$(‘#form‘).valid()返回true的時候再提交。

通過監聽form的submit事件，對form進行ajax提交。樣本完整代碼如下：

 

[php] view plaincopy 

1. $(document).ready(function(){  
2.   
3.     $(‘#myForm‘).submit(function(){  
4.         if (!$(this).valid()) return false;  
5.         $(‘.error‘).html(‘‘);  
6.         $("#go").prop("disabled",true);  
7.         $(this).ajaxSubmit({  
8.             type:"POST",  
9.             //beforeSubmit: showRequest,  
10.             dataType:‘json‘,  
11.             success: showResponse  
12.         });  
13.         return false;  
14.     });  
15.   
16.     var validator = $("#myForm").validate({  
17.         rules: {  
18.             username: "required",  
19.             email: {  
20.                 required: true,  
21.                 email: true  
22.             }  
23.         },  
24.         messages: {  
25.             username: "請輸入姓名",  
26.             email: {  
27.                 required: "請輸入Email地址",  
28.                 email: "請輸入正確的email地址"  
29.             }  
30.         }  
31.     });  
32.   
33. });  
34.   
35. function showResponse(jsonData,statusText)  
36. {  
37.     if(statusText==‘success‘)  
38.     {  
39.         $("#go").prop("disabled",false);  
40.         if (jsonData.status == 1)  
41.         {  
42.             $("#return").html(jsonData.message);  
43.         }  
44.         else  
45.         {  
46.             $.each(jsonData.errors, function(k,v){  
47.                 //$(‘#output‘).find(‘ul‘).append(‘<li>‘ + v + ‘</li>‘);  
48.                 $(‘.e_‘ + k).html(v);  
49.             });  
50.         }  
51.     }  
52. }  

二、控制錯誤資訊位置的方法

現象一：

我在註冊表單新加了一個驗證碼。驗證結果錯誤時，這個錯誤資訊跑到驗證碼前面去了。如所示：

目的：讓錯誤資訊在驗證碼後面

現象二：

中的紅色提示內容，我想移到 (* 必填) 的後面。

上面兩個現象，可通過jquery.validate內建的控制錯誤資訊位置的方法——’errorPlacement’，使用也很方便：

 

[php] view plaincopy 

1. errorPlacement: function(error, element)  
2. {  
3.     error.appendTo(element.parent());  
4. }