jQuery驗證框架 .

時間  2020-08-11
標籤 jquery 驗證 框架 欄目 JQuery 简体版
原文   原文鏈接
「程序人生」中國軟件開發者職業生涯調查      CSDN社區「三八節」特別活動      開發者職業生涯調查之將來

jQuery驗證框架

分類： JQuery 2011-04-18 19:06 1373人閱讀 評論(0) 收藏 舉報
jquery function email string wrapper input
轉載於：http://koalaxyq.iteye.com/blog/559202
 
 
Html代碼 複製代碼   收藏代碼
  1. <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  2. <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  3. <script type="text/javascript">  
  4.     $(document).ready(function(){   
  5.         $("#textForm").validate();   
  6.     });   
  7. </script>  
  8. <form class="cmxform" id="commentForm" method="get" action="">  
  9.     Name<input id="cname" name="name" size="25" class="required" minlength="2" />  
  10.         <input class="submit" type="submit" value="Submit"/>  
  11. </form>  
[html] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium"><script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  2. <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  3. <script type="text/javascript">  
  4.     $(document).ready(function(){  
  5.         $("#textForm").validate();  
  6.     });  
  7. </script>  
  8. <form class="cmxform" id="commentForm" method="get" action="">  
  9.     Name<input id="cname" name="name" size="25" class="required" minlength="2" />  
  10.         <input class="submit" type="submit" value="Submit"/>  
  11. </form>  
  12. </SPAN>  
<script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
<script type="text/javascript" src=js/jquery.validate.pack.js></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#textForm").validate();
    });
</script>
<form class="cmxform" id="commentForm" method="get" action="">
    Name<input id="cname" name="name" size="25" class="required" minlength="2" />
        <input class="submit" type="submit" value="Submit"/>
</form>


此文謹以以上js片斷開始介紹jQuery Validation。
驗證從這個方法開始：validate( [options] )
1、可選項( options )
[1]  debug      類型：Boolean    默認：false
      說明：開啓調試模式。若是爲true，表單不會提交，並且會在控制檯顯示一些錯誤消息（須要Firebug或者Firebug lite）。當要阻止表單默認提交事件，嘗試去開啓它。
javascript

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    debug: true  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    debug: true  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   debug: true
})



[2]  submitHandler      類型：Callback    默認：default (native) form submit
      說明：當表單經過驗證，提交表單。回調函數有個默認參數form
php

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    submitHandler: function(form) {   
  3.        // do other stuff for a valid form   
  4.     form.submit();   
  5.    }   
  6. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    submitHandler: function(form) {  
  3.        // do other stuff for a valid form   
  4.     form.submit();  
  5.    }  
  6. })  
  7. </SPAN>  
$(".selector").validate({
   submitHandler: function(form) {
       // do other stuff for a valid form
   	form.submit();
   }
})



[3]  invalidHandler      類型：Callback
      說明：當未經過驗證的表單提交時，能夠在該回調函數中處理一些事情。該回調函數有兩個參數：第一個爲一個事件對象，第二個爲驗證器（validator）
css

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.     invalidHandler: function(form, validator) {   
  3.       var errors = validator.numberOfInvalids();   
  4.       if (errors) {   
  5.         var message = errors == 1   
  6.           ? 'You missed 1 field. It has been highlighted'  
  7.           : 'You missed ' + errors + ' fields. They have been highlighted';   
  8.         $("div.error span").html(message);   
  9.         $("div.error").show();   
  10.       } else {   
  11.         $("div.error").hide();   
  12.       }   
  13.     }   
  14.  })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.     invalidHandler: function(form, validator) {  
  3.       var errors = validator.numberOfInvalids();  
  4.       if (errors) {  
  5.         var message = errors == 1  
  6.           ? 'You missed 1 field. It has been highlighted'  
  7.           : 'You missed ' + errors + ' fields. They have been highlighted';  
  8.         $("div.error span").html(message);  
  9.         $("div.error").show();  
  10.       } else {  
  11.         $("div.error").hide();  
  12.       }  
  13.     }  
  14.  })  
  15. </SPAN>  
$(".selector").validate({
    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = errors == 1
          ? 'You missed 1 field. It has been highlighted'
          : 'You missed ' + errors + ' fields. They have been highlighted';
        $("div.error span").html(message);
        $("div.error").show();
      } else {
        $("div.error").hide();
      }
    }
 })



[4]  ignore      類型：Seletor
      說明：當進行表單驗證時，過濾掉選擇器所選擇的表單。用了jQuery not方法（ not() ）。類型爲submit和reset的表單老是被忽略的。
html

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.    ignore: ".ignore"  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.    ignore: ".ignore"  
  3. })  
  4. </SPAN>  
$("#myform").validate({
   ignore: ".ignore"
})



[5]  rules      類型：Options    默認：rules are read from markup (classes, attributes, metadata)
      說明：用戶定義的鍵/值對規則。鍵爲一個表單元素的name屬性（或是一組單選/複選按鈕）、值爲一個簡單的字符串或者由規則/參數對（rule/parameter）組成的一個對象。能夠和 class/attribute/metadata 規則一塊兒使用。每一個規則能夠指定一個依存的驗證前提條件。
java

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    rules: {   
  3.      // simple rule, converted to {required:true}   
  4.      name: "required",   
  5.      // compound rule   
  6.      email: {   
  7.        required: true,   
  8.        email: true  
  9.      }/*  
  10.      email: {  
  11.          depends: function(element) {  
  12.            return $("#contactform_email:checked")  
  13.          }  
  14.      }*/  
  15.    }   
  16. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    rules: {  
  3.      // simple rule, converted to {required:true}   
  4.      name: "required",  
  5.      // compound rule   
  6.      email: {  
  7.        required: true,  
  8.        email: true  
  9.      }/* 
  10.      email: { 
  11.          depends: function(element) { 
  12.            return $("#contactform_email:checked") 
  13.          } 
  14.      }*/  
  15.    }  
  16. })  
  17. </SPAN>  
$(".selector").validate({
   rules: {
     // simple rule, converted to {required:true}
     name: "required",
     // compound rule
     email: {
       required: true,
       email: true
     }/*
     email: {
         depends: function(element) {
           return $("#contactform_email:checked")
         }
     }*/
   }
})



[6]  messages      類型：Options    默認：驗證方法默認使用的消息
      說明：用戶自定義的 鍵/值 對消息。鍵爲一個表單元素的name屬性，值爲該表單元素將要顯示的消息。該消息覆蓋元素的title屬性或者默認消息。消息能夠是一個字符串或者一個回調函數。回調函數必須在驗證器的做用域中調用，將規則參數做爲回調函數的第一個參數，將該表單元素做爲回調函數的第二個參數，且必須返回一個字符串類型的消息。
jquery

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    rules: {   
  3.      name: "required",   
  4.      email: {   
  5.        required: true,   
  6.        email: true  
  7.      }   
  8.    },   
  9.    messages: {   
  10.      name: "Please specify your name",   
  11.      email: {   
  12.        required: "We need your email address to contact you",   
  13.        email: "Your email address must be in the format of name@domain.com"  
  14.      }   
  15.    }   
  16. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    rules: {  
  3.      name: "required",  
  4.      email: {  
  5.        required: true,  
  6.        email: true  
  7.      }  
  8.    },  
  9.    messages: {  
  10.      name: "Please specify your name",  
  11.      email: {  
  12.        required: "We need your email address to contact you",  
  13.        email: "Your email address must be in the format of name@domain.com"  
  14.      }  
  15.    }  
  16. })  
  17. </SPAN>  
$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of name@domain.com"
     }
   }
})



[7]  groups      類型：Options
      說明：指定錯誤消息分組。一個組由一個任意的組名做爲鍵，一個由空白符分割的表單元素name屬性列表做爲值。用errorPlacement定義組消息的存放位置。
git

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   groups: {   
  3.     username: "fname lname"  
  4.   },   
  5.   errorPlacement: function(error, element) {   
  6.      if (element.attr("name") == "fname"    
  7.                  || element.attr("name") == "lname" )   
  8.        error.insertAfter("#lastname");   
  9.      else  
  10.        error.insertAfter(element);   
  11.    },   
  12.    debug:true  
  13.  })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   groups: {  
  3.     username: "fname lname"  
  4.   },  
  5.   errorPlacement: function(error, element) {  
  6.      if (element.attr("name") == "fname"   
  7.                  || element.attr("name") == "lname" )  
  8.        error.insertAfter("#lastname");  
  9.      else  
  10.        error.insertAfter(element);  
  11.    },  
  12.    debug:true  
  13.  })  
  14. </SPAN>  
$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "fname" 
                 || element.attr("name") == "lname" )
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
   },
   debug:true
 })



[8]  onsubmit      類型：Boolean    默認：true
      說明：提交時驗證表單。當設置爲false時，只能用其它的事件驗證。
ajax

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    onsubmit: false  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    onsubmit: false  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   onsubmit: false
})



[9]  onfocusout      類型：Boolean    默認：true
      說明：焦點離開時驗證（單選/複選按鈕除外）。若是表單中沒有輸入任何內容，全部的規則將被跳過，除非該表單已經被標記爲無效的。
express

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    onfocusout: false  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    onfocusout: false  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   onfocusout: false
})



[10]  onkeyup      類型：Boolean    默認：true
      說明：當鍵盤按鍵彈起時驗證。只要表單元素沒有被標記成無效的，不會有反應。另外，全部的規則將在每次按鍵彈起時驗證。
數組

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    onkeyup: false  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    onkeyup: false  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   onkeyup: false
})



[11]  onclick      類型：Boolean    默認：true
      說明：鼠標點擊驗證針對單選和複選按鈕。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    onclick: false  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    onclick: false  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   onclick: false
})



[12]  focusInvalid      類型：Boolean    默認：true
      說明：當驗證無效時，焦點跳到第一個無效的表單元素。當爲false時，驗證無效時，沒有焦點響應。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    focusInvalid: false  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    focusInvalid: false  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   focusInvalid: false
})



[12]  focusCleanup      類型：Boolean    默認：false
      說明：若是爲true，當表單獲得焦點時，移除在該表單上的errorClass並隱藏全部錯誤消息。避免與focusInvalid一塊兒使用。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    focusCleanup: true  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    focusCleanup: true  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   focusCleanup: true
})



[13]  meta      類型：String
      說明：若是想使用其它插件來使用元數據驗證規則，得指定相應的元數據對象。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.    meta: "validate"  
  3. })   
  4. <input type="text" name="email" class="{validate:{ required: true, email:true}}" />  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.    meta: "validate"  
  3. })  
  4. <input type="text" name="email" class="{validate:{ required: true, email:true}}" />  
  5. </SPAN>  
$("#myform").validate({
   meta: "validate"
})
<input type="text" name="email" class="{validate:{ required: true, email:true}}" />



[14]  errorClass      類型：String    默認："error"
      說明：用此設定的樣式來定義錯誤消息的樣式。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    errorClass: "invalid"  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    errorClass: "invalid"  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   errorClass: "invalid"
})



[15]  validClass      類型：String    默認："valid"
      說明：設定當驗證經過時，消息顯示的樣式。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    validClass: "success"  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    validClass: "success"  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   validClass: "success"
})



[16]  errorElement      類型：String    默認："label"
      說明：用html元素類型建立錯誤消息的容器。默認的"label"有個優勢就是能在錯誤消息與無效表單之間用for屬性創建有意義的聯繫（一個經常使用的，而無論表單元素是什麼的）。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    errorElement: "em"  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    errorElement: "em"  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   errorElement: "em"
})



[17]  wrapper      類型：Boolean
      說明：用一個指定的元素將錯誤消息包圍。與errorLabelContainer一塊兒建立一個錯誤消息列表很是有用。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    wrapper: "li"  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    wrapper: "li"  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   wrapper: "li"
})



[18]  errorLabelContainer      類型：Selector
      說明：錯誤消息標籤的容器。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.    errorLabelContainer: "#messageBox",   
  3.    wrapper: "li"  
  4. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.    errorLabelContainer: "#messageBox",  
  3.    wrapper: "li"  
  4. })  
  5. </SPAN>  
$("#myform").validate({
   errorLabelContainer: "#messageBox",
   wrapper: "li"
})



[19]  errorContainer      類型：Selector
      說明：錯誤消息的容器。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.    errorContainer: "#messageBox1, #messageBox2",   
  3.    errorLabelContainer: "#messageBox1 ul",   
  4.    wrapper: "li", debug:true,   
  5.    submitHandler: function() { alert("Submitted!") }   
  6. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.    errorContainer: "#messageBox1, #messageBox2",  
  3.    errorLabelContainer: "#messageBox1 ul",  
  4.    wrapper: "li", debug:true,  
  5.    submitHandler: function() { alert("Submitted!") }  
  6. })  
  7. </SPAN>  
$("#myform").validate({
   errorContainer: "#messageBox1, #messageBox2",
   errorLabelContainer: "#messageBox1 ul",
   wrapper: "li", debug:true,
   submitHandler: function() { alert("Submitted!") }
})



[20]  showErrors      類型：Callback    默認：None,內置的顯示消息
      說明：自定義消息顯示的句柄。該回調函數有兩個參數，第一個爲errorMap,第二個參數爲errorList，在validator對象的上下文中調用。參數只包含那些通過onblur/onkeyup驗證的表單元素，也有多是單個元素。除此以外，你還能夠用this.defaultShowErrors()觸發默認的行爲。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    showErrors: function(errorMap, errorList) {   
  3.         $("#summary").html("Your form contains "  
  4.                                    + this.numberOfInvalids()    
  5.                                    + " errors, see details below.");   
  6.         this.defaultShowErrors();   
  7.     }   
  8.  })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    showErrors: function(errorMap, errorList) {  
  3.         $("#summary").html("Your form contains "  
  4.                                    + this.numberOfInvalids()   
  5.                                    + " errors, see details below.");  
  6.         this.defaultShowErrors();  
  7.     }  
  8.  })  
  9. </SPAN>  
$(".selector").validate({
   showErrors: function(errorMap, errorList) {
		$("#summary").html("Your form contains "
                                   + this.numberOfInvalids() 
                                   + " errors, see details below.");
		this.defaultShowErrors();
	}
 })



[21]  errorPlacement      類型：Callback    默認：緊跟在無效表單後的標籤中
      說明：用戶自定義錯誤標籤的顯示位置。第一個參數：一個做爲jQuery對象的錯誤標籤，第二個參數爲：一個做爲jQuery對象的未經過驗證的表單元素。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   errorPlacement: function(error, element) {   
  3.      error.appendTo( element.parent("td").next("td") );   
  4.    },   
  5.    debug:true  
  6.  })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   errorPlacement: function(error, element) {  
  3.      error.appendTo( element.parent("td").next("td") );  
  4.    },  
  5.    debug:true  
  6.  })  
  7. </SPAN>  
$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })



[22]  success      類型：String,Callback
      說明：若是指定它，當驗證經過時顯示一個消息。若是是String類型的，則添加該樣式到標籤中，若是是一個回調函數，則將標籤做爲其惟一的參數。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.    //success: "valid",   
  3.      success: function(label) {   
  4.          label.addClass("valid").text("Ok!")   
  5.      }   
  6. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.    //success: "valid",   
  3.      success: function(label) {  
  4.          label.addClass("valid").text("Ok!")  
  5.      }  
  6. })  
  7.   
  8. </SPAN>  
$("#myform").validate({
   //success: "valid",
     success: function(label) {
         label.addClass("valid").text("Ok!")
     }
})



[23]  highlight      類型：Callback    默認：添加errorClass到表單元素
      說明：將未經過驗證的表單元素設置高亮。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.   highlight: function(element, errorClass) {   
  3.      $(element).fadeOut(function() {   
  4.        $(element).fadeIn()   
  5.      })   
  6.   }   
  7. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.   highlight: function(element, errorClass) {  
  3.      $(element).fadeOut(function() {  
  4.        $(element).fadeIn()  
  5.      })  
  6.   }  
  7. })  
  8. </SPAN>  
$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
})



[24]  unhighlight      類型：Callback    默認：移除errorClass
      說明：與highlight操做相反

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.   highlight: function(element, errorClass) {   
  3.      $(element).addClass(errorClass);   
  4.      $(element.form).find("label[for=" + element.id + "]")   
  5.                     .addClass(errorClass);   
  6.   },   
  7.   unhighlight: function(element, errorClass) {   
  8.      $(element).removeClass(errorClass);   
  9.      $(element.form).find("label[for=" + element.id + "]")   
  10.                     .removeClass(errorClass);   
  11.   }   
  12. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.   highlight: function(element, errorClass) {  
  3.      $(element).addClass(errorClass);  
  4.      $(element.form).find("label[for=" + element.id + "]")  
  5.                     .addClass(errorClass);  
  6.   },  
  7.   unhighlight: function(element, errorClass) {  
  8.      $(element).removeClass(errorClass);  
  9.      $(element.form).find("label[for=" + element.id + "]")  
  10.                     .removeClass(errorClass);  
  11.   }  
  12. });  
  13. </SPAN>  
$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).addClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .addClass(errorClass);
  },
  unhighlight: function(element, errorClass) {
     $(element).removeClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]")
                    .removeClass(errorClass);
  }
});



[25]  ignoreTitle      類型：Boolean    默認：false
      說明：設置它用來跳過錯誤消息對title屬性的引用，避免Google工具欄引發的衝突。

Js代碼 複製代碼   收藏代碼
  1. $(".selector").validate({   
  2.    ignoreTitle: true  
  3. })  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(".selector").validate({  
  2.    ignoreTitle: true  
  3. })  
  4. </SPAN>  
$(".selector").validate({
   ignoreTitle: true
})


 

 

 

 

jQuery驗證框架

2、插件方法( Plugin methods )
[1]  validate( [options] )           返回：Validator 
      說明：見第一部分

[2]  valid()      返回：Boolean
      說明：檢查表單是否已經過驗證。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate();   
  2. $("a.check").click(function() {   
  3.   alert("Valid: " + $("#myform").valid());   
  4.   return false;   
  5. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate();  
  2. $("a.check").click(function() {  
  3.   alert("Valid: " + $("#myform").valid());  
  4.   return false;  
  5. });  
  6. </SPAN>  
$("#myform").validate();
$("a.check").click(function() {
  alert("Valid: " + $("#myform").valid());
  return false;
});



[3]  rules()       返回：Options
      說明：返回一個表單元素的驗證規則。有幾個方法定義驗證規則：

  • 在表單元素的class屬性中定義驗證規則（推薦的方法）。
  • 經過指定驗證方法的屬性（推薦的方法）。
  • 能夠經過元數據(metadata)插件來定義元數據驗證規則。
  • 能夠經過指定validate()方法的rules選項。

 

Js代碼 複製代碼   收藏代碼
  1. alert($("#password").rules()["required"]);  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">alert($("#password").rules()["required"]);  
  2. </SPAN>  
alert($("#password").rules()["required"]);




[4]  rules( "add", rules )       返回：Options
      參數"add"     類型：String
      參數  rules     類型：Options   要添加的規則，與validate方法中的驗證規則一致。
      說明：添加規則到匹配的表單元素，返回該元素的全部驗證規則，須要先執行$("form").validate()。在rules中也能夠添加用戶自定義的消息對象。

Js代碼 複製代碼   收藏代碼
  1. $("#myinput").rules("add", {   
  2.  required: true,   
  3.  minlength: 2,   
  4.  messages: {   
  5.    required: "Required input",   
  6.    minlength: jQuery.format("Please, at least {0} characters are necessary")   
  7.  }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myinput").rules("add", {  
  2.  required: true,  
  3.  minlength: 2,  
  4.  messages: {  
  5.    required: "Required input",  
  6.    minlength: jQuery.format("Please, at least {0} characters are necessary")  
  7.  }  
  8. });  
  9. </SPAN>  
$("#myinput").rules("add", {
 required: true,
 minlength: 2,
 messages: {
   required: "Required input",
   minlength: jQuery.format("Please, at least {0} characters are necessary")
 }
});



[5]  rules( "remove", [rules] )       返回：Options
      參數"remove"     類型：String
      參數  rules (Options)    類型：Options   用空白符分割的驗證規則。只操做經過rules選項或rules("add")指定的驗證規則。
      說明：從第一個匹配的表單元素中移除指定的驗證規則，並返回該元素全部的驗證規則。

Js代碼 複製代碼   收藏代碼
  1. $("#myinput").rules("remove");   
  2. $("#myinput").rules("remove", "min max");  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myinput").rules("remove");  
  2. $("#myinput").rules("remove", "min max");  
  3. </SPAN>  
$("#myinput").rules("remove");
$("#myinput").rules("remove", "min max");



[6]  removeAttrs( attributes )       返回：Options
      參數  attributes      類型：String  用空白符分割的屬性列表
      說明：從第一個匹配的表單元素中刪除指定的屬性並返回它們。

Js代碼 複製代碼   收藏代碼
  1. $("#skip").click(function() {   
  2.   var rules = $("#myinput").removeAttrs("min max");   
  3.   $("#myform).submit();   
  4.   $("#myinput").attr(rules);   
  5. });  

 

jQuery驗證框架


3、定製的選擇器(Custom Selectors)

[1]  :blank       返回：Array<Element>
      說明：匹配全部空值的表單元素。沒有任何值或都空白符(whitespace)都被認爲是空值。
                  它是由 jQuery.trim(value).length == 0 來判斷的。

Js代碼 複製代碼   收藏代碼
  1. $("input:blank").css("background-color", "#bbbbff");  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("input:blank").css("background-color", "#bbbbff");  
  2. </SPAN>  
$("input:blank").css("background-color", "#bbbbff");


[2]  :filled       返回：Array<Element>
      說明：匹配全部不爲空的表單元素。任何值均可以認爲是已輸入的，但只有空白符的值除外。
                  它是由 jQuery.trim(value).length > 0 來判斷的。

Js代碼 複製代碼   收藏代碼
  1. $("input:filled").css("background-color", "#bbbbff");  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("input:filled").css("background-color", "#bbbbff");  
  2. </SPAN>  
$("input:filled").css("background-color", "#bbbbff");


[3]  :unchecked       返回：Array<Element>
      說明：匹配全部未選擇的表單元素。反向操做爲 :checked

Js代碼 複製代碼   收藏代碼
  1. function countUnchecked() {   
  2.     var n = $("input:unchecked").length;   
  3.     $("div").text(n + (n == 1 ? " is" : " are") + " unchecked!");   
  4. }   
  5. countUnchecked();   
  6. $(":checkbox").click(countUnchecked);  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">function countUnchecked() {  
  2.     var n = $("input:unchecked").length;  
  3.     $("div").text(n + (n == 1 ? " is" : " are") + " unchecked!");  
  4. }  
  5. countUnchecked();  
  6. $(":checkbox").click(countUnchecked);  
  7. </SPAN>  
function countUnchecked() {
    var n = $("input:unchecked").length;
    $("div").text(n + (n == 1 ? " is" : " are") + " unchecked!");
}
countUnchecked();
$(":checkbox").click(countUnchecked);




4、實用工具(Utilities)

  jQuery.validator.format( template, [argument], [argumentN...] )        返回：String
      參數 template     類型：String    要格式化的字符串
      參數 argument (Optional)    類型：String, Array<String>    用字符串或字符串數組(對應索引的元素)填充第一個佔位符
      參數 argumentN... (Optional)    類型：String    填充第二個或以後的佔位符。
      說明：用參數來填充{n}佔位符。除template外的一個或多個參數均可以用來填充相應的佔位符。

Js代碼 複製代碼   收藏代碼
  1. $(document).ready(function(){   
  2.     $("button").click(function () {   
  3.        var str = "Hello {0}, this is {1}";   
  4.        alert("'" + str + "'");   
  5.        str = jQuery.validator.format(str, "World", "Bob");   
  6.        //str = $.validator.format(str, ["koala","oo"]);   
  7.        alert("'" + str + "'");   
  8.     });   
  9. });  

 

jQuery驗證框架

5、驗證器( Validator )
            validate方法返回的驗證器對象( Validator Object) 有一些公用的方法。你能夠用來觸發驗證程序或改變表單(form)的內容。驗證器對象有更多的方法，不過只有文檔中給出的這些方法是專爲使用而設計的。

(一)驗證器方法(Validator methods)
[1]  form()       返回：Boolean
      說明：驗證表單是否經過驗證，若經過驗證則返回true，反之返回false。這個方法在正常的提交事件(submit event)觸發，它返回一個結果。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate().form();  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate().form();  
  2. </SPAN>  
$("#myform").validate().form();


[2]  element( element )       返回：Boolean
      參數 element      類型：Selector    驗證表單中的一個須要驗證的表單元素。
      說明：驗證單個表單元素是否經過驗證，若經過驗證則返回true，反之返回false。這個方法在正常的焦點離開事件(blur)或按鍵彈起(keyup)時觸發，它返回一個結果。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate().element( "#myselect" );  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate().element( "#myselect" );  
  2. </SPAN>  
$("#myform").validate().element( "#myselect" );


[3]  resetForm( )       返回：undefined
      說明：重置表單。
                  恢復表單元素到原來的值(須要form插件支持)，移除無效驗證的樣式並隱藏錯誤消息。
                  (...貌似只有在IE下才能夠移除樣式)

Js代碼 複製代碼   收藏代碼
  1. var validator = $("#myform").validate();   
  2. validator.resetForm();  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">var validator = $("#myform").validate();  
  2. validator.resetForm();  
  3. </SPAN>  
var validator = $("#myform").validate();
validator.resetForm();


[4]  showErrors( errors )       返回：undefined
      參數 errors      類型：Object<String, String>    一個或多個表單元素的name屬性和驗證消息組成的鍵/值對。
      說明：顯示指定的驗證消息。
                  在指定的errorPlacement中顯示驗證消息。鍵爲待驗證表單元素的name屬性，值爲相應的驗證消息。

Js代碼 複製代碼   收藏代碼
  1. var validator = $("#myform").validate();   
  2. validator.showErrors({"firstname": "I know that your firstname is Pete, Pete!"});  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">var validator = $("#myform").validate();  
  2. validator.showErrors({"firstname": "I know that your firstname is Pete, Pete!"});  
  3. </SPAN>  
var validator = $("#myform").validate();
validator.showErrors({"firstname": "I know that your firstname is Pete, Pete!"});


[5]  numberOfInvalids( )       返回：Integer
      說明：返回未經過驗證的表單元素的個數。
                  這個方法依賴於內部的驗證器狀況。只有在驗證完全部表單元素時才統計全部待驗證的表單元素(submit事件或經過$("form").valid())。當只驗證單個表單元素，則只有統計該表單元素。與invalidHandler選項聯合使用的時候很是有用。

Js代碼 複製代碼   收藏代碼
  1. var validator = $("#myform").validate({   
  2.     invalidHandler: function() {   
  3.         $("#summary").text(validator.numberOfInvalids() +"field(s) areinvalid");   
  4.     }   
  5. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">var validator = $("#myform").validate({  
  2.     invalidHandler: function() {  
  3.         $("#summary").text(validator.numberOfInvalids() +"field(s) areinvalid");  
  4.     }  
  5. });  
  6. </SPAN>  
var validator = $("#myform").validate({
    invalidHandler: function() {
        $("#summary").text(validator.numberOfInvalids() +"field(s) areinvalid");
    }
});



(二)驗證器函數(Validator functions)
[1]  setDefaults( defaults )       返回：undefined
      參數 defaults      類型：Options    要設置成默認值的選項。
      說明：修改驗證框架的默認設置。
                  接受validate方法中的全部選項。

Js代碼 複製代碼   收藏代碼
  1. jQuery.validator.setDefaults({    
  2.     debug: true    
  3. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">jQuery.validator.setDefaults({   
  2.     debug: true   
  3. });  
  4. </SPAN>  
jQuery.validator.setDefaults({ 
    debug: true 
});


[2]  addMethod( name, method, [message] )       返回：undefined
      參數 name     類型：String    要添加的方法名，用於標識和引用，必須是一個有效的javascript標識符。
      參數 method     類型：Callback    方法的實現部分，返回true若是表單元素經過驗證。
      參數 message(Optional)     類型：String, Function    該方法的默認驗證消息。能夠用 jQuery.validator.format(value) 方法建立。若是未定義該參數，則使用本地已存在的驗證消息，另外，必須爲指定的表單元素定義驗證消息。
      說明：添加一個用戶自定義的驗證方法。它由方法名（必須是一個合法的javascript標識符）、基於javascript的函數及默認的驗證消息組成。

Js代碼 複製代碼   收藏代碼
  1. jQuery.validator.addMethod("math", function(value, element, params) {    
  2.     return this.optional(element) || value == params[0] + params[1];    
  3. }, jQuery.format("Please enter the correct value for {0} + {1}"));  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">jQuery.validator.addMethod("math", function(value, element, params) {   
  2.     return this.optional(element) || value == params[0] + params[1];   
  3. }, jQuery.format("Please enter the correct value for {0} + {1}"));  
  4. </SPAN>  
jQuery.validator.addMethod("math", function(value, element, params) { 
    return this.optional(element) || value == params[0] + params[1]; 
}, jQuery.format("Please enter the correct value for {0} + {1}"));


[3]  addClassRules( name, rules )       返回：undefined
      參數 name     類型：String    要添加的樣式規則名。
      參數 rules     類型：Options    規則選項。
      說明：添加一個複合的樣式驗證方法。對於將多個聯合使用的規則重構進單個樣式中很是有用。

Js代碼 複製代碼   收藏代碼
  1. jQuery.validator.addClassRules("name", {   
  2.   required: true,   
  3.   minlength: 2   
  4. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">jQuery.validator.addClassRules("name", {  
  2.   required: true,  
  3.   minlength: 2  
  4. });  
  5. </SPAN>  
jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});


[4]  addClassRules( rules )       返回：undefined
      參數 rules     類型：Options    樣式類名-規則表。
      說明：添加一個複合的樣式驗證方法。對於重構通用的聯合規則很是有用。

Js代碼 複製代碼   收藏代碼
  1. jQuery.validator.addClassRules({   
  2.   name: {   
  3.     required: true,   
  4.     minlength: 2   
  5.   },   
  6.   zip: {   
  7.     required: true,   
  8.     digits: true,   
  9.     minlength: 5,   
  10.     maxlength: 5   
  11.   }   
  12. });  

 

 

jQuery驗證框架

6、框架內建的驗證方法( List of built-in Validation methods )

[1]  required( )       返回：Boolean
      說明：讓表單元素必須填寫（選擇）。
                  若是表單元素爲空(text input)或未選擇(radio/checkbox)或選擇了一個空值(select)。
                  做用於text inputs, selects, checkboxes and radio buttons.
                  當select提供了一個空值選項<option value="">Choose...</option>則強迫用戶去選擇一個不爲空的值。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     fruit: "required"  
  4.   }   
  5. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     fruit: "required"  
  4.   }  
  5. });  
  6. </SPAN>  
$("#myform").validate({
  rules: {
    fruit: "required"
  }
});


[2]  required( dependency-expression )       返回：Boolean
      參數 dependency-expression     類型：String    在form上下文中的一個表達式( String )，表單元素是否須要填寫依賴於該表達式返回一個或多個元素。
      說明：讓表單元素必須填寫（選擇），依賴於參數的返回值。
                  表達式中像#foo:checked, #foo:filled, #foo:visible這樣的選擇過濾器將常常用到。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     details: {   
  4.       required: "#other:checked"  
  5.     }   
  6.   }, debug:true  
  7. });   
  8. $("#other").click(function() {   
  9.    $("#details").valid();   
  10. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     details: {  
  4.       required: "#other:checked"  
  5.     }  
  6.   }, debug:true  
  7. });  
  8. $("#other").click(function() {  
  9.    $("#details").valid();  
  10. });  
  11. </SPAN>  
$("#myform").validate({
  rules: {
    details: {
      required: "#other:checked"
    }
  }, debug:true
});
$("#other").click(function() {
   $("#details").valid();
});


[3]  required( dependency-callback )       返回：Boolean
      參數 dependency-callback     類型：Callback   該回函數以待驗證表單元素做爲其惟一的參數。當該回調函數返回true，則該表單元素是必須的。
      說明：讓表單元素必須填寫（選擇），依賴於參數的返回值。
                  表達式中像#foo:checked, #foo:filled, #foo:visible這樣的選擇過濾器將常常用到。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     age: {   
  4.       required: true,   
  5.       min: 3   
  6.     },   
  7.     parent: {   
  8.       required: function(element) {   
  9.         return $("#age").val() < 13;   
  10.       }   
  11.     }   
  12.   }   
  13. });   
  14. $("#age").blur(function() {   
  15.     $("#parent").valid();   
  16. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     age: {  
  4.       required: true,  
  5.       min: 3  
  6.     },  
  7.     parent: {  
  8.       required: function(element) {  
  9.         return $("#age").val() < 13;  
  10.       }  
  11.     }  
  12.   }  
  13. });  
  14. $("#age").blur(function() {  
  15.     $("#parent").valid();  
  16. });  
  17. </SPAN>  
$("#myform").validate({
  rules: {
    age: {
      required: true,
      min: 3
    },
    parent: {
      required: function(element) {
        return $("#age").val() < 13;
      }
    }
  }
});
$("#age").blur(function() {
    $("#parent").valid();
});


[4]  remote( options )       返回：Boolean
      參數 options      類型：String, Options    請求服務器端資源的url(String)。或$.ajax()方法中的選項(Options)。
      說明：請求服務器端資源驗證。
                  服務器端的資源經過$.ajax (XMLHttpRequest)獲取key/value對，響應返回true則表單經過驗證。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     email: {   
  4.       required: true,   
  5.       email: true,   
  6.       remote: "check-email.php"  
  7.     }   
  8.   }   
  9. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     email: {  
  4.       required: true,  
  5.       email: true,  
  6.       remote: "check-email.php"  
  7.     }  
  8.   }  
  9. });  
  10. </SPAN>  
$("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});


[5]  minlength( length )       返回：Boolean
      參數 length      類型：Integer    至少須要多少個字符數。
      說明：確保表單元素知足給定的最小字符數。
                  在文本框(text input)中輸入的字符太少、沒有選中足夠的複選框(checkbox)、一個選擇框(select)中沒有選中足夠的選項。這以上三種狀況中該方法返回false。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       minlength: 3   
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       minlength: 3  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});


[6]  maxlength( length )       返回：Boolean
      參數 length      類型：Integer    容許輸入的最大字符數。
      說明：確保表單元素的文本不超過給定的最大字符數。
                  在文本框(text input)中輸入的字符太多、選擇太多的複選框(checkbox)、一個選擇框(select)中沒有選中太多的選項。這以上三種狀況中該方法返回false。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       maxlength: 4   
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       maxlength: 4  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      maxlength: 4
    }
  }
});


[7]  rangelength( range )       返回：Boolean
      參數 range      類型：Array<Integer>    容許輸入的字符數範圍。
      說明：確保表單元素的文本字符數在給定的範圍當中。
                  在文本框(text input)中輸入的字符數不在給定範圍內、選擇的複選框(checkbox)不在給在的範圍內、一個選擇框(select)選中的選項不在給定的範圍內。這以上三種狀況中該方法返回false。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       rangelength: [2, 6]   
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       rangelength: [2, 6]  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      rangelength: [2, 6]
    }
  }
});


[8]  min( value )       返回：Boolean
      參數 value      類型：Integer    須要輸入的最小整數。
      說明：確保表單元素的值大於等於給定的最小整數。
                  該方法只在文本輸入框(text input)下有效。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       min: 13   
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       min: 13  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      min: 13
    }
  }
});


[9]  max( value )       返回：Boolean
      參數 value      類型：Integer    給定的最大整數。
      說明：確保表單元素的值小於等於給定的最大整數。
                  該方法只在文本輸入框(text input)下有效。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       max: 23   
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       max: 23  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      max: 23
    }
  }
});


[10]  range( range )       返回：Boolean
      參數 range     類型：Array<Integer>    給定的整數範圍。
      說明：確保表單元素的值在給定的範圍當中。
                  該方法只在文本輸入框(text input)下有效。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       range: [13, 23]   
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       range: [13, 23]  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});


[11]  email( )       返回：Boolean
      說明：確保表單元素的值爲一個有效的email地址。
                  若是值爲一個有效的email地址，則返回true。該方法只在文本輸入框(text input)下有效。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       email: true  
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       email: true  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});


[12]  url( )       返回：Boolean
      說明：確保表單元素的值爲一個有效的URL地址(http://www.mydomain.com)。
                  若是值爲一個有效的url地址，則返回true。該方法只在文本輸入框(text input)下有效。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       url: true  
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       url: true  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});


[13]  date( )  dateISO( )  dateDE( )      返回：Boolean
      說明：用來驗證有效的日期。這三個函數分別驗證的日期格式爲(mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、(mm.dd.yyyy)。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       date: true  
  6.       /*dateISO: true  
  7.         dateDE: true*/  
  8.     }   
  9.   }   
  10. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       date: true  
  6.       /*dateISO: true 
  7.         dateDE: true*/  
  8.     }  
  9.   }  
  10. });  
  11. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      date: true
      /*dateISO: true
        dateDE: true*/
    }
  }
});


[14]  number( )  numberDE()      返回：Boolean
      說明：用來驗證小數。number()的小數點爲圓點( . )，numberDE()的小數點爲英文逗號( , )。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       number: true  
  6.       //numberDE: true   
  7.     }   
  8.   }   
  9. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       number: true  
  6.       //numberDE: true   
  7.     }  
  8.   }  
  9. });  
  10. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
      //numberDE: true
    }
  }
});


[15]  digits()      返回：Boolean
      說明：確保文本框中的值爲數字。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       digits: true  
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       digits: true  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      digits: true
    }
  }
});


[16]  digits()      返回：Boolean
      說明：確保文本框中的值爲數字。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       digits: true  
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       digits: true  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      digits: true
    }
  }
});


[17]  accept( [extension] )       返回：Boolean
      參數 extension(Optional)     類型：String    容許的文件後綴名，用"|"或","分割。默認爲"png|jpe?g|gif"
      說明：確保表單元素接收給定的文件後綴名的文件。若是沒有指定參數，則只有圖片是容許的(png,jpeg,gif)。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     field: {   
  4.       required: true,   
  5.       accept: "xls|csv"  
  6.     }   
  7.   }   
  8. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     field: {  
  4.       required: true,  
  5.       accept: "xls|csv"  
  6.     }  
  7.   }  
  8. });  
  9. </SPAN>  
$("#myform").validate({
  rules: {
    field: {
      required: true,
      accept: "xls|csv"
    }
  }
});


[18]  equalTo( other )       返回：Boolean
      參數 other      類型：Selector    要與當前值比較的另外一個表單元素。
      說明：確保兩個表單元素的值是一致的。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     password: "required",   
  4.     password_again: {   
  5.       equalTo: "#password"  
  6.     }   
  7.   }   
  8. });  

 

jQuery驗證框架

7、注意事項

[1]複雜的name屬性值
    當使用rules選項時，若是表單的name屬性值包含有非法的javascript標識符，必須將name值加上引號。

Js代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.   rules: {   
  3.     // no quoting necessary   
  4.     name: "required",   
  5.     // quoting necessary!   
  6.     "user[email]": "email",   
  7.     // dots need quoting, too!   
  8.     "user.address.street": "required"  
  9.   }   
  10. });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.   rules: {  
  3.     // no quoting necessary   
  4.     name: "required",  
  5.     // quoting necessary!   
  6.     "user[email]": "email",  
  7.     // dots need quoting, too!   
  8.     "user.address.street": "required"  
  9.   }  
  10. });  
  11. </SPAN>  
$("#myform").validate({
  rules: {
    // no quoting necessary
    name: "required",
    // quoting necessary!
    "user[email]": "email",
    // dots need quoting, too!
    "user.address.street": "required"
  }
});



[2]重構規則
    不論何時，當你的表單中的多個字段含有相同的驗證規則及驗證消息，重構規則能夠減小不少重複。使用 addMethod 和 addClassRules 將很是有效果。  
    假使已經重構了以下規則：

Js代碼 複製代碼   收藏代碼
  1. // alias required to cRequired with new message   
  2. $.validator.addMethod("cRequired", $.validator.methods.required,   
  3.   "Customer name required");   
  4. // alias minlength, too   
  5. $.validator.addMethod("cMinlength", $.validator.methods.minlength,    
  6.   // leverage parameter replacement for minlength, {0} gets replaced with 2   
  7.   $.format("Customer name must have at least {0} characters"));   
  8. // combine them both, including the parameter for minlength   
  9. $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">// alias required to cRequired with new message   
  2. $.validator.addMethod("cRequired", $.validator.methods.required,  
  3.   "Customer name required");  
  4. // alias minlength, too   
  5. $.validator.addMethod("cMinlength", $.validator.methods.minlength,   
  6.   // leverage parameter replacement for minlength, {0} gets replaced with 2   
  7.   $.format("Customer name must have at least {0} characters"));  
  8. // combine them both, including the parameter for minlength   
  9. $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });  
  10. </SPAN>  
// alias required to cRequired with new message
$.validator.addMethod("cRequired", $.validator.methods.required,
  "Customer name required");
// alias minlength, too
$.validator.addMethod("cMinlength", $.validator.methods.minlength, 
  // leverage parameter replacement for minlength, {0} gets replaced with 2
  $.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });


    那麼使用的時候以下：

Html代碼 複製代碼   收藏代碼
  1. <input name="customer1" class="customer" />  
  2. <input name="customer2" class="customer" />  
  3. <input name="customer3" class="customer" />  
[html] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium"><input name="customer1" class="customer" />  
  2. <input name="customer2" class="customer" />  
  3. <input name="customer3" class="customer" />  
  4. </SPAN>  
<input name="customer1" class="customer" />
<input name="customer2" class="customer" />
<input name="customer3" class="customer" />



[3]驗證消息
    當驗證了一個無效的表單元素，驗證消息顯示在用戶面前。這些消息是從哪裏來的呢？有三個途徑來取得驗證消息。
        1.經過待驗證表單元素的title屬性
        2.經過默認的驗證消息
        3.經過插件設置(messages選項)
    這三種途徑的優先順序爲：3 > 1 > 2
   
[4]驗證消息與Google工具欄的衝突
    有時候驗證消息會與Goole工具欄的AutoFill插件衝突。AutoFill經過替換表單元素的title屬性，以顯示提示消息。此時，驗證消息若是獲取的是title屬性值，那麼就得不到咱們預期想要獲得的結果。當文檔載入時，能夠經過以下方法避免衝突。

Js代碼 複製代碼   收藏代碼
  1. $("input.remove_title").attr("title", "");  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("input.remove_title").attr("title", "");  
  2. </SPAN>  
$("input.remove_title").attr("title", "");



[5]表單提交
    默認地，表單驗證失敗時阻止表單的提交，當驗證經過，表單提交。固然，也能夠經過submitHandler來自定義提交事件。
    將提交按鈕的class屬性設置成cancel，在表單提交時能夠跳過驗證。

Js代碼 複製代碼   收藏代碼
  1. <input type="submit" name="submit" value="Submit" />   
  2. <input type="submit" class="cancel" name="cancel" value="Cancel" />  
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium"><input type="submit" name="submit" value="Submit" />  
  2. <input type="submit" class="cancel" name="cancel" value="Cancel" />  
  3. </SPAN>  
<input type="submit" name="submit" value="Submit" />
<input type="submit" class="cancel" name="cancel" value="Cancel" />


    下面這段代碼將循環提交表單：

Java代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.  submitHandler: function(form) {   
  3.    // some other code maybe disabling submit button   
  4.    // then:   
  5.    $(form).submit();   
  6.  }   
  7. });  
[java] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$("#myform").validate({  
  2.  submitHandler: function(form) {  
  3.    // some other code maybe disabling submit button   
  4.    // then:   
  5.    $(form).submit();  
  6.  }  
  7. });  
  8. </SPAN>  
$("#myform").validate({
 submitHandler: function(form) {
   // some other code maybe disabling submit button
   // then:
   $(form).submit();
 }
});


    $(form).submit() 觸發了另一輪的驗證，驗證後又去調用submitHandler，而後就循環了。能夠用 form.submit() 來觸發原生的表單提交事件。

Java代碼 複製代碼   收藏代碼
  1. $("#myform").validate({   
  2.  submitHandler: function(form) {   
  3.    form.submit();   
  4.  }   
  5. });  

 

jQuery驗證框架

8、應用實例

[1] 驗證頁面

Html代碼 複製代碼   收藏代碼
  1. <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>  
  2. <html>  
  3.   <head>  
  4.     <title>jquery驗證框架</title>  
  5.     <link rel="stylesheet" type="text/css" href="css/index.css">  
  6.     <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  7.     <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  8.     <script type="text/javascript" src=js/jquery.form.js></script>  
  9.     <script type="text/javascript" src=js/valid.js></script>  
  10.     <style type="text/css">  
  11.         label { width: 10em; float: left; }   
  12.         label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}   
  13.         input.haha { border: 1px solid red; }   
  14.         label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}   
  15.         input.focus { border: 2px solid green; }   
  16.         ul li{ display: block;}   
  17.     </style>  
  18.   </head>  
  19.      
  20.   <body>  
  21.      
  22.   <div id="form_con">  
  23.         <form class="cmxform" id="myform" method="post" action="">  
  24.             <table cellspacing="0" cellpadding="0">  
  25.                 <tbody>  
  26.                     <tr>  
  27.                         <td>用戶名</td>  
  28.                         <td><input type="text" name="username" class="required" /></td>  
  29.                         <td></td>  
  30.                     </tr>  
  31.                     <tr>  
  32.                         <td>密碼</td>  
  33.                         <td><input id="password" type="password" name="firstpwd" /></td>  
  34.                         <td></td>  
  35.                     </tr>  
  36.                     <tr>  
  37.                         <td>驗證密碼</td>  
  38.                         <td><input type="password" name="secondpwd" /></td>  
  39.                         <td></td>  
  40.                     </tr>  
  41.                     <tr>  
  42.                         <td>性別</td>  
  43.                         <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>  
  44.                         <td></td>  
  45.                     </tr>  
  46.                     <tr>  
  47.                         <td>年齡</td>  
  48.                         <td><input type="text" name="age" /></td>  
  49.                         <td></td>  
  50.                     </tr>  
  51.                     <tr>  
  52.                         <td>郵箱</td>  
  53.                         <td><input type="text" name="email" /></td>  
  54.                         <td></td>  
  55.                     </tr>  
  56.                     <tr>  
  57.                         <td>我的網頁</td>  
  58.                         <td><input type="text" name="purl" /></td>  
  59.                         <td></td>  
  60.                     </tr>  
  61.                     <tr>  
  62.                         <td>電話</td>  
  63.                         <td><input type="text" name="telephone" /></td>  
  64.                         <td></td>  
  65.                     </tr>  
  66.                     <tr>  
  67.                         <td>附件</td>  
  68.                         <td><input type="file" name="afile"/></td>  
  69.                         <td></td>  
  70.                     </tr>  
  71.                     <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>  
  72.                 </tbody>             
  73.             </table>  
  74.         </form>  
  75.   </div>     
  76.   </body>  
  77. </html>  
[html] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium"><%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>  
  2. <html>  
  3.   <head>  
  4.     <title>jquery驗證框架</title>  
  5.     <link rel="stylesheet" type="text/css" href="css/index.css">  
  6.     <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  7.     <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  8.     <script type="text/javascript" src=js/jquery.form.js></script>  
  9.     <script type="text/javascript" src=js/valid.js></script>  
  10.     <style type="text/css">  
  11.         label { width: 10em; float: left; }  
  12.         label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}  
  13.         input.haha { border: 1px solid red; }  
  14.         label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}  
  15.         input.focus { border: 2px solid green; }  
  16.         ul li{ display: block;}  
  17.     </style>  
  18.   </head>  
  19.     
  20.   <body>  
  21.     
  22.   <div id="form_con">  
  23.         <form class="cmxform" id="myform" method="post" action="">  
  24.             <table cellspacing="0" cellpadding="0">  
  25.                 <tbody>  
  26.                     <tr>  
  27.                         <td>用戶名</td>  
  28.                         <td><input type="text" name="username" class="required" /></td>  
  29.                         <td></td>  
  30.                     </tr>  
  31.                     <tr>  
  32.                         <td>密碼</td>  
  33.                         <td><input id="password" type="password" name="firstpwd" /></td>  
  34.                         <td></td>  
  35.                     </tr>  
  36.                     <tr>  
  37.                         <td>驗證密碼</td>  
  38.                         <td><input type="password" name="secondpwd" /></td>  
  39.                         <td></td>  
  40.                     </tr>  
  41.                     <tr>  
  42.                         <td>性別</td>  
  43.                         <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>  
  44.                         <td></td>  
  45.                     </tr>  
  46.                     <tr>  
  47.                         <td>年齡</td>  
  48.                         <td><input type="text" name="age" /></td>  
  49.                         <td></td>  
  50.                     </tr>  
  51.                     <tr>  
  52.                         <td>郵箱</td>  
  53.                         <td><input type="text" name="email" /></td>  
  54.                         <td></td>  
  55.                     </tr>  
  56.                     <tr>  
  57.                         <td>我的網頁</td>  
  58.                         <td><input type="text" name="purl" /></td>  
  59.                         <td></td>  
  60.                     </tr>  
  61.                     <tr>  
  62.                         <td>電話</td>  
  63.                         <td><input type="text" name="telephone" /></td>  
  64.                         <td></td>  
  65.                     </tr>  
  66.                     <tr>  
  67.                         <td>附件</td>  
  68.                         <td><input type="file" name="afile"/></td>  
  69.                         <td></td>  
  70.                     </tr>  
  71.                     <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>  
  72.                 </tbody>            
  73.             </table>  
  74.         </form>  
  75.   </div>    
  76.   </body>  
  77. </html></SPAN>  
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
  <head>
    <title>jquery驗證框架</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
    <script type="text/javascript" src=js/jquery.validate.pack.js></script>
    <script type="text/javascript" src=js/jquery.form.js></script>
    <script type="text/javascript" src=js/valid.js></script>
    <style type="text/css">
	    label { width: 10em; float: left; }
		label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
		input.haha { border: 1px solid red; }
		label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
		input.focus { border: 2px solid green; }
		ul li{ display: block;}
    </style>
  </head>
  
  <body>
  
  <div id="form_con">
	  	<form class="cmxform" id="myform" method="post" action="">
	  		<table cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td>用戶名</td>
						<td><input type="text" name="username" class="required" /></td>
						<td></td>
					</tr>
					<tr>
						<td>密碼</td>
						<td><input id="password" type="password" name="firstpwd" /></td>
						<td></td>
					</tr>
					<tr>
						<td>驗證密碼</td>
						<td><input type="password" name="secondpwd" /></td>
						<td></td>
					</tr>
					<tr>
						<td>性別</td>
						<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
						<td></td>
					</tr>
					<tr>
						<td>年齡</td>
						<td><input type="text" name="age" /></td>
						<td></td>
					</tr>
					<tr>
						<td>郵箱</td>
						<td><input type="text" name="email" /></td>
						<td></td>
					</tr>
					<tr>
						<td>我的網頁</td>
						<td><input type="text" name="purl" /></td>
						<td></td>
					</tr>
					<tr>
						<td>電話</td>
						<td><input type="text" name="telephone" /></td>
						<td></td>
					</tr>
					<tr>
						<td>附件</td>
						<td><input type="file" name="afile"/></td>
						<td></td>
					</tr>
					<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
				</tbody>  		
	  		</table>
	  	</form>
  </div>	
  </body>
</html>


[2] 驗證js

Js代碼 複製代碼   收藏代碼
  1. $(function(){   
  2.     var validator = $("#myform").validate({   
  3.         debug: true,       //調試模式取消submit的默認提交功能   
  4.         errorClass: "haha",//默認爲錯誤的樣式類爲：error   
  5.         focusInvalid: false,   
  6.         onkeyup: false,   
  7.         submitHandler: function(form){   //表單提交句柄,爲一回調函數，帶一個參數：form   
  8.             alert("提交表單");   
  9.             //form.submit();   提交表單   
  10.         },   
  11.         rules: {           //定義驗證規則,其中屬性名爲表單的name屬性   
  12.             username: {   
  13.                 required: true,   
  14.                 minlength: 2,   
  15.                 remote: "uservalid.jsp"  //傳說當中的ajax驗證   
  16.             },   
  17.             firstpwd: {   
  18.                 required: true,   
  19.                 //minlength: 6   
  20.                 rangelength: [6,8]   
  21.             },   
  22.             secondpwd: {   
  23.                 required: true,   
  24.                 equalTo: "#password"  
  25.             },   
  26.             sex: {   
  27.                 required: true  
  28.             },   
  29.             age: {   
  30.                 required: true,   
  31.                 range: [0,120]   
  32.             },   
  33.             email: {   
  34.                 required: true,   
  35.                 email: true  
  36.             },   
  37.             purl: {   
  38.                 required: true,   
  39.                 url: true  
  40.             },   
  41.             afile: {   
  42.                 required: true,   
  43.                 accept: "xls,doc,rar,zip"  
  44.             }   
  45.         },   
  46.         messages: {       //自定義驗證消息   
  47.             username: {   
  48.                 required: "用戶名是必需的！",   
  49.                 minlength: $.format("用戶名至少要{0}個字符！"),   
  50.                 remote: $.format("{0}已經被佔用")   
  51.             },   
  52.             firstpwd: {   
  53.                 required: "密碼是必需的！",   
  54.                 rangelength: $.format("密碼要在{0}-{1}個字符之間！")   
  55.             },   
  56.             secondpwd: {   
  57.                 required: "密碼驗證是必需的！",     
  58.                 equalTo: "密碼驗證須要與密碼一致"  
  59.             },   
  60.             sex: {   
  61.                 required: "性別是必需的"  
  62.             },   
  63.             age: {   
  64.                 required: "年齡是必需的",   
  65.                 range: "年齡必須介於{0}-{1}之間"  
  66.             },   
  67.             email: {   
  68.                 required: "郵箱是必需的！",   
  69.                 email: "請輸入正確的郵箱地址（例如 myemail@163.com）"  
  70.             },   
  71.             purl: {   
  72.                 required: "我的主頁是必需的",   
  73.                 url: "請輸入正確的url格式,如 http://www.domainname.com"  
  74.             },   
  75.             afile: {   
  76.                 required: "附件是必需的！",   
  77.                 accept: "只接收xls,doc,rar,zip文件"  
  78.             }   
  79.         },   
  80.         errorPlacement: function(error, element) {  //驗證消息放置的地方   
  81.             error.appendTo( element.parent("td").next("td") );   
  82.         },   
  83.         highlight: function(element, errorClass) {  //針對驗證的表單設置高亮   
  84.             $(element).addClass(errorClass);   
  85.         },   
  86.         success: function(label) {     
  87.                     label.addClass("valid").text("Ok!")     
  88.             }     
  89.            
  90.         /*,  
  91.         errorContainer: "#error_con",               //驗證消息集中放置的容器  
  92.         errorLabelContainer: "#error_con ul",       //存放消息無序列表的容器  
  93.         wrapper: "li",                              //將驗證消息用無序列表包圍  
  94.         validClass: "valid",                        //經過驗證的樣式類  
  95.         errorElement: "em",                         //驗證標籤的名稱，默認爲：label  
  96.         success: "valid"                            //驗證經過的樣式類  
  97.         */  
  98.     });   
  99.     $("button").click(function(){   
  100.         validator.resetForm();   
  101.     });   
  102.     //alert($("#password").rules()["required"]);   
  103.     //validator.showErrors({"username": "用戶名是必需的"});   
  104.     /*$("button").click(function () {  
  105.         var str = "Hello {0}, this is {1}";  
  106.         alert("'" + str + "'");  
  107.         str = $.validator.format(str, ["koala","oo"]);  
  108.         alert("'" + str + "'");  
  109.     });*/  
  110.                
  111. });   
[js] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium">$(function(){  
  2.     var validator = $("#myform").validate({  
  3.         debug: true,       //調試模式取消submit的默認提交功能   
  4.         errorClass: "haha",//默認爲錯誤的樣式類爲：error   
  5.         focusInvalid: false,  
  6.         onkeyup: false,  
  7.         submitHandler: function(form){   //表單提交句柄,爲一回調函數，帶一個參數：form   
  8.             alert("提交表單");  
  9.             //form.submit();   提交表單   
  10.         },  
  11.         rules: {           //定義驗證規則,其中屬性名爲表單的name屬性   
  12.             username: {  
  13.                 required: true,  
  14.                 minlength: 2,  
  15.                 remote: "uservalid.jsp"  //傳說當中的ajax驗證   
  16.             },  
  17.             firstpwd: {  
  18.                 required: true,  
  19.                 //minlength: 6   
  20.                 rangelength: [6,8]  
  21.             },  
  22.             secondpwd: {  
  23.                 required: true,  
  24.                 equalTo: "#password"  
  25.             },  
  26.             sex: {  
  27.                 required: true  
  28.             },  
  29.             age: {  
  30.                 required: true,  
  31.                 range: [0,120]  
  32.             },  
  33.             email: {  
  34.                 required: true,  
  35.                 email: true  
  36.             },  
  37.             purl: {  
  38.                 required: true,  
  39.                 url: true  
  40.             },  
  41.             afile: {  
  42.                 required: true,  
  43.                 accept: "xls,doc,rar,zip"  
  44.             }  
  45.         },  
  46.         messages: {       //自定義驗證消息   
  47.             username: {  
  48.                 required: "用戶名是必需的！",  
  49.                 minlength: $.format("用戶名至少要{0}個字符！"),  
  50.                 remote: $.format("{0}已經被佔用")  
  51.             },  
  52.             firstpwd: {  
  53.                 required: "密碼是必需的！",  
  54.                 rangelength: $.format("密碼要在{0}-{1}個字符之間！")  
  55.             },  
  56.             secondpwd: {  
  57.                 required: "密碼驗證是必需的！",    
  58.                 equalTo: "密碼驗證須要與密碼一致"  
  59.             },  
  60.             sex: {  
  61.                 required: "性別是必需的"  
  62.             },  
  63.             age: {  
  64.                 required: "年齡是必需的",  
  65.                 range: "年齡必須介於{0}-{1}之間"  
  66.             },  
  67.             email: {  
  68.                 required: "郵箱是必需的！",  
  69.                 email: "請輸入正確的郵箱地址（例如 myemail@163.com）"  
  70.             },  
  71.             purl: {  
  72.                 required: "我的主頁是必需的",  
  73.                 url: "請輸入正確的url格式,如 http://www.domainname.com"  
  74.             },  
  75.             afile: {  
  76.                 required: "附件是必需的！",  
  77.                 accept: "只接收xls,doc,rar,zip文件"  
  78.             }  
  79.         },  
  80.         errorPlacement: function(error, element) {  //驗證消息放置的地方   
  81.             error.appendTo( element.parent("td").next("td") );  
  82.         },  
  83.         highlight: function(element, errorClass) {  //針對驗證的表單設置高亮   
  84.             $(element).addClass(errorClass);  
  85.         },  
  86.         success: function(label) {    
  87.                     label.addClass("valid").text("Ok!")    
  88.             }    
  89.           
  90.         /*, 
  91.         errorContainer: "#error_con",               //驗證消息集中放置的容器 
  92.         errorLabelContainer: "#error_con ul",       //存放消息無序列表的容器 
  93.         wrapper: "li",                              //將驗證消息用無序列表包圍 
  94.         validClass: "valid",                        //經過驗證的樣式類 
  95.         errorElement: "em",                         //驗證標籤的名稱，默認爲：label 
  96.         success: "valid"                            //驗證經過的樣式類 
  97.         */  
  98.     });  
  99.     $("button").click(function(){  
  100.         validator.resetForm();  
  101.     });  
  102.     //alert($("#password").rules()["required"]);   
  103.     //validator.showErrors({"username": "用戶名是必需的"});   
  104.     /*$("button").click(function () { 
  105.         var str = "Hello {0}, this is {1}"; 
  106.         alert("'" + str + "'"); 
  107.         str = $.validator.format(str, ["koala","oo"]); 
  108.         alert("'" + str + "'"); 
  109.     });*/  
  110.               
  111. });   
  112. </SPAN>  
$(function(){
	var validator = $("#myform").validate({
		debug: true,       //調試模式取消submit的默認提交功能
		errorClass: "haha",//默認爲錯誤的樣式類爲：error
		focusInvalid: false,
		onkeyup: false,
		submitHandler: function(form){   //表單提交句柄,爲一回調函數，帶一個參數：form
			alert("提交表單");
			//form.submit();   提交表單
		},
		rules: {           //定義驗證規則,其中屬性名爲表單的name屬性
			username: {
				required: true,
				minlength: 2,
				remote: "uservalid.jsp"  //傳說當中的ajax驗證
			},
			firstpwd: {
				required: true,
				//minlength: 6
				rangelength: [6,8]
			},
			secondpwd: {
				required: true,
				equalTo: "#password"
			},
			sex: {
				required: true
			},
			age: {
				required: true,
				range: [0,120]
			},
			email: {
				required: true,
				email: true
			},
			purl: {
				required: true,
				url: true
			},
			afile: {
				required: true,
				accept: "xls,doc,rar,zip"
			}
		},
		messages: {       //自定義驗證消息
			username: {
				required: "用戶名是必需的！",
				minlength: $.format("用戶名至少要{0}個字符！"),
				remote: $.format("{0}已經被佔用")
			},
			firstpwd: {
				required: "密碼是必需的！",
				rangelength: $.format("密碼要在{0}-{1}個字符之間！")
			},
			secondpwd: {
				required: "密碼驗證是必需的！",	
				equalTo: "密碼驗證須要與密碼一致"
			},
			sex: {
				required: "性別是必需的"
			},
			age: {
				required: "年齡是必需的",
				range: "年齡必須介於{0}-{1}之間"
			},
			email: {
				required: "郵箱是必需的！",
				email: "請輸入正確的郵箱地址（例如 myemail@163.com）"
			},
			purl: {
				required: "我的主頁是必需的",
				url: "請輸入正確的url格式,如 http://www.domainname.com"
			},
			afile: {
				required: "附件是必需的！",
				accept: "只接收xls,doc,rar,zip文件"
			}
		},
		errorPlacement: function(error, element) {  //驗證消息放置的地方
	    	error.appendTo( element.parent("td").next("td") );
	    },
	    highlight: function(element, errorClass) {  //針對驗證的表單設置高亮
		    $(element).addClass(errorClass);
	    },
	    success: function(label) {  
             	    label.addClass("valid").text("Ok!")  
   			}  
	    
	    /*,
	    errorContainer: "#error_con",               //驗證消息集中放置的容器
	    errorLabelContainer: "#error_con ul",       //存放消息無序列表的容器
	    wrapper: "li",								//將驗證消息用無序列表包圍
	    validClass: "valid",						//經過驗證的樣式類
	    errorElement: "em",							//驗證標籤的名稱，默認爲：label
	    success: "valid"							//驗證經過的樣式類
	    */
	});
	$("button").click(function(){
		validator.resetForm();
	});
	//alert($("#password").rules()["required"]);
	//validator.showErrors({"username": "用戶名是必需的"});
	/*$("button").click(function () {
	    var str = "Hello {0}, this is {1}";
	    alert("'" + str + "'");
	    str = $.validator.format(str, ["koala","oo"]);
	    alert("'" + str + "'");
    });*/
			
});


[3] 遠程驗證程序

Java代碼 複製代碼   收藏代碼
  1. <%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%   
  2.     String username = request.getParameter("username");   
  3.     PrintWriter pw = response.getWriter();   
  4.     try{   
  5.         if(username.toLowerCase().equals("admin")){   
  6.             pw.println("true");   
  7.         }else{   
  8.             pw.println("false");   
  9.         }   
  10.     }catch(Exception ex){   
  11.         ex.getStackTrace();   
  12.     }finally{   
  13.         pw.flush();   
  14.         pw.close();   
  15.     }   
  16. %>  
[java] view plain copy print ?
  1. <SPAN style="FONT-SIZE: medium"><%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%  
  2.     String username = request.getParameter("username");  
  3.     PrintWriter pw = response.getWriter();  
  4.     try{  
  5.         if(username.toLowerCase().equals("admin")){  
  6.             pw.println("true");  
  7.         }else{  
  8.             pw.println("false");  
  9.         }  
  10.     }catch(Exception ex){  
  11.         ex.getStackTrace();  
  12.     }finally{  
  13.         pw.flush();  
  14.         pw.close();  
  15.     }  
  16. %></SPAN>  
<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
	String username = request.getParameter("username");
	PrintWriter pw = response.getWriter();
	try{
		if(username.toLowerCase().equals("admin")){
			pw.println("true");
		}else{
			pw.println("false");
		}
	}catch(Exception ex){
		ex.getStackTrace();
	}finally{
		pw.flush();
		pw.close();
	}
%>


[4] 驗證效果





 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程