jquery validata 表單驗證DEMO

複製程式碼

jQuery驗證框架

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

[1] required( ) required( ) required( ) required( ) required( ) required( ) required( )回傳：Boolean
 說明：讓表單元素必須填入（選擇）。
 如果表單元素為空(text input)或未選擇(radio/checkbox)或選擇了一個空值(select)。
 作用於text inputs, selects, checkboxes and radio buttons.
 當select提供了一個空值選項Choose...則強迫使用者去選擇一個不為空的值。

Js程式碼
$("#myform").validate({
 rules: {
 fruit: "required"
 }
});

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

Js程式碼
$("#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程式碼
$("#myform").validate({
 rules: {
 age: {
 required: true,
 min: 3
 },
 parent: {
 required: function(element) {
 return $("#age").val()  }
 }
 }
});
$("#age").blur(function() {
 $("#parent").valid();
});

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

Js代碼
$("#myform").validate({
 rules: {
 email: {
 required: true,
 email: true,
 required: true,
 email: true,
 remote: "check-email.php"
 }
 }
});

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

Js程式碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 minlength: 3
 }
 }
});

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

Js代碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 maxlength: 4
 }
 }
});

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

Js代碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 rangelength: [2, 6 ]
 }
 }
});

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

Js代碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 min: 13
 }
 }
});

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

Js代碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 max: 23
 }
 }
});

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

Js代碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 range: [13, 23 ]
 }
 }
});

[11] email( ) 傳回：Boolean
 說明：確保表單元素的值為一個有效的email位址。
 如果值為一個有效的email位址，則傳回true。此方法只在文字輸入框(text input)下有效。

Js代碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 email: true
 }
 }
});

[12] url( ) 回傳：Boolean
 說明：確保表單元素的值為一個有效的URL位址(http://www.mydomain .com)。
 如果值為一個有效的url位址，則傳回true。此方法只在文字輸入框(text input)下有效。

Js代碼
$("#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程式碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 date: true
 /*dateISO: true
 dateDE: true*/
 }
 }
});

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

Js代碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 number: true
 //numberDE: true
 }
 }
});

[15] digits() 傳回：Boolean
 說明：確保文字方塊中的值為數字。

Js程式碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 digits: true
 required: true,
 digits: true
 }
 }
});

[16] digits() 傳回：Boolean
 說明：確保文字方塊中的值為數字。

Js程式碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 digits: true
 required: true,
 digits: true
 }
 }
});

[17] accept( [extension] ) 傳回：Boolean
 參數extension(Optional) 類型：String 允許的檔案後綴名，用"|"或","分割。預設為"png|jpe?g|gif"
 說明：確保表單元素接收給定的檔案後綴名的檔案。如果沒有指定參數，則只有圖片是允許的(png,jpeg,gif)。

Js程式碼
$("#myform").validate({
 rules: {
 field: {
 required: true,
 accept: "xls|csv "
 }
 }
});

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

Js程式碼
$("#myform").validate({
 rules: {
 password: "required",
 password_again: {