jquery validata 表單驗證DEMO-php教程-PHP中文網

複製程式碼

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提供了一個空值選項則強迫使用者去選擇一個不為空的值。
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: {

equalTo: "# password"

} } });