jQuery ------------> 驗證表單

標籤：get   copy   表單驗證   orm   turn   原因   相同   jpg   加油   

做好一個精美的頁面，固然是好，但是，一個頁面除了寫好之外，我們更需要的是將其功能完善。比如表單的驗證，這隻是眾多工作之一。然後本次就以jQuery的validate外掛程式，來學習記錄一下表單驗證部分。但願自己下次在遇到寫表單驗證時，可以不費吹灰之力。

接下來就是驗證代碼展示：

  1 //社會安全號碼驗證  2 jQuery.validator.addMethod("isIdNo", function (value, element){  3     var id=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;  4     return this.optional(element) || id.test(value);  5 });  6 //郵編驗證  7 jQuery.validator.addMethod("isPostal", function(value, element) {     8     var tel = /^[0-9]{6}$/;  9     return this.optional(element) || (tel.test(value)); 10 }); 11 //手機號碼驗證 12 jQuery.validator.addMethod("isPhone", function (value, element) { 13     var length = value.length; 14     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; 15     var tel = /^\d{3,4}-?\d{7,9}$/; 16     return this.optional(element) || (tel.test(value) || mobile.test(value)); 17 }); 18 //判斷密碼是否相同 19 jQuery.validator.addMethod("isSame", function(value, element) {    20     var pwd1 = document.getElementById("Pwd1").value; 21     return this.optional(element) || (pwd1.test(value)); 22 }); 23  24 jQuery.validator.addMethod("isSimliar", function(value, element) {    25     var ID1 = $("#ID01").val() 26     var ID2 = $("#ID02").val() 27     if(ID1 == ID2) 28         return true; 29     return this.optional(element); 30 }); 31  32  33  34 //判斷社會安全號碼碼是否相同 35 jQuery.validator.addMethod("isSimliar", function(value, element) {    36     var Idno = document.getElementById("ID01").value; 37     return this.optional(element) || (Idno.test(value)); 38 }); 39  40 $(document).ready(function(){ 41              $(".form-inline").validate({ 42                 onsubmit: true, 43                 debug: false, 44                  45                 rules:{ 46                     username:{ 47                         required:true 48                          49                     }, 50                     name:{ 51                         required:true 52                     }, 53                     password:{ 54                         required:true 55                     }, 56                     pswConfirm:{ 57                         required:true, 58                         isSame:true 59                          60                     }, 61                     idNo:{ 62                         required:true, 63                         isIdNo:true 64                     }, 65                     idNoConfirm:{ 66                         required:true, 67                         isSimliar:true 68                     }, 69                     mobile:{ 70                          required:true, 71                         isPhone:true     72                      }, 73                      qq:{ 74                          required:true 75                      }, 76                      major:{ 77                          required:true 78                           79                      }, 80                      email:{ 81                         required:true, 82                         isPostal:true 83                     }, 84                     address:{ 85                         required:true 86                          87                     }, 88                                            89                 }, 90                 messages:{ 91                     username:{ 92                         required:"使用者名稱不可為空" 93                     }, 94                     name:{ 95                         required:"姓名不可為空" 96                     }, 97                     password:{ 98                         required:"密碼不可為空" 99                     },100                     pswConfirm:{101                         required:"密碼不可為空",102                         isSame:"密碼必須一致"103                         104                     },105                     idNo:{106                         required:"社會安全號碼不可為空",107                         isIdNo:"身份證格式錯誤"108                     },109                     idNoConfirm:{110                         required:"社會安全號碼不可為空",111                         isSimliar:"身份證必須一致"112                     },113                     mobile:{114                          required:"手機號不可為空",115                         isPhone:"手機號碼格式錯誤"    116                      },117                      qq:{118                          required:"QQ號不可為空"119                      },120                      major:{121                          required:"專業不可為空"122                          123                      },124                      email:{125                         required:"郵箱不可為空",126                         isPostal:"郵箱格式錯誤"127                     },128                     address:{129                         required:"郵箱地址不可為空"130                     131                     },132                 },133                  error:function(span){134                     span.raddClass("error glyphicon glyphicon-remove");135                     },136             });137            138 });

其實，代碼很簡單，但是可能是因為自己忘記了一些內容，才導致自己寫這段代碼的耗時很長。記個筆記放在這裡，多多複習鞏固！

但實際上，如果對jQuery的使用比較熟練的話，可能會發現上述代碼可以更加最佳化。注意需要寫表示錯誤的css樣式。

最終效果表示為：

比如說，上述中對密碼的再次驗證要求其相同，可以直接用equalTo,不用添加方法。

用一個圖來記住：

本次寫代碼耗時較長的原因是：js中是沒有equals()方法的，可以直接用 == 或者 is()方法直接代替。

最後用jQuery寫得js檔案還需要validate.js  

很簡單的代碼，不能耗費太多的時間，不然，別人就開始質疑你的能力了。加油，Fighting!

 

jQuery ------------> 驗證表單