一、validate是jQuery的一個表單驗證插件，它不僅實現了客戶端表單的多種驗證規則，而且，還是用ajax實現了服務器端遠程驗證。它內置有多種驗證規則，同時，可以很方便的定義自己的規則。在此，說明一些常用的功能，詳細的介紹，可以參考官方文檔。http://docs.jquery.com/Plugins/Validation
validation插件使用很簡單：
Javascript代碼
$("#formId").validate(
{
// 驗證規則
rules:
{},
// 驗證提示信息（失敗時）
message:{},
errorElement: 'span', // 放置錯誤信息的元素，可以是其他的。
errorPlacement: function(error,element) // 將錯誤提示信息放在什麼地方
{},
// 成功時執行
success: function(label)
{
label.text(" ") // 將錯誤內容清空，一定要是" "有空格，否則IE有問題。
.addClass("success");
}
});
$("#formId").validate(
{
// 驗證規則
rules:
{},
// 驗證提示信息（失敗時）
message:{},
errorElement: 'span', // 放置錯誤信息的元素，可以是其他的。
errorPlacement: function(error,element) // 將錯誤提示信息放在什麼地方
{},
// 成功時執行
success: function(label)
{
label.text(" ") // 將錯誤內容清空，一定要是" "有空格，否則IE有問題。
.addClass("success");
}
});
其中"formId"是表單的form元素的ID屬性。
rules和message分別都對應一個對象，該對象只包含屬性，其中，屬性名爲表單中input的name（包括select的name)，值爲要應用的規則對象。如：
Javascript代碼
rules:{
userName:{
required:true,
maxlength:20,
emote: {
url: "ajax/validateUserName.action", //後臺處理程序
type: "post", //數據發送方式
dataType: "json", //接受數據格式
data: { //要傳遞的數據，默認已傳遞應用此規則的表單項
email: function() {
return $("#email").val();
}
}
}
}
rules:{
userName:{
required:true,
maxlength:20,
emote: {
url: "ajax/validateUserName.action", //後臺處理程序
type: "post", //數據發送方式
dataType: "json", //接受數據格式
data: { //要傳遞的數據，默認已傳遞應用此規則的表單項
email: function() {
return $("#email").val();
}
}
}
}
message對應是一樣的，只是把規則的值改爲提示信息，如：required:‘必填項'。
validation內置的驗證規則如下：
required:true 必填
minlength:最小長度
maxlength:最大長度
rangelength: [3,10] 長度介於 3 和 {1} 之間的字符串
range:[100,1000] 只能是100和 1000 之間的值”
min:最小值
max:最大值
email:true 驗證郵箱
url:true 驗證是否是合法的網址
date:true 驗證是否是合法的日期 new Date() 類型格式
dateISO:true 驗證是否是合法的日期 年/月/日 或 年-月-日 格式
number:true 驗證是否是合法的數字
digits:true 驗證是否爲整數
creditcard: 驗證合法的信用卡號
equalTo:”要匹配的元素” 如:’#cnfpass’ , 驗證兩次輸入值是否相同
accept: “gif|png|jpg” 驗證是否是合法後綴名的字符串
Javascript代碼
remote: {
url: "ajax/validateUserName.action", //後臺處理程序
type: "post", //數據發送方式
dataType: "json", //接受數據格式
data: { //要傳遞的數據，默認已傳遞應用此規則的表單項
email: function() {
return $("#email").val();
}
}
remote: {
url: "ajax/validateUserName.action", //後臺處理程序
type: "post", //數據發送方式
dataType: "json", //接受數據格式
data: { //要傳遞的數據，默認已傳遞應用此規則的表單項
email: function() {
return $("#email").val();
}
}
注意：remote是遠程驗證：比如註冊驗證用戶名是否已被註冊，返回值只能是true（驗證成功）或false（驗證失敗）。
除了內置的驗證規則，validation還允許自定義驗證規則。這是通過validation的addMethod方法實現的，語法爲：jQuery.validator.addMethod("name",function,message)。其中name爲驗證規則的名稱，function定義驗證的規則，message是驗證失敗時的提示信息。如：
Javascript代碼
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
// 增加只能是字母和數字的驗證
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");
/**
* 自定義驗證規則——對電話號碼進行驗證
*/
$.validator.addMethod(
"isPhone",
function(value, element)
{
// “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配電話號碼的格式多種：010-82839278、(010)82839278、01082839278等，但是，這樣有一個問題
// 如：(01082839278這樣的也會匹配。當然可以用分支條件"|"解決，比較麻煩。而且以什麼開始或結束也沒有匹配。
// 爲了簡單起見，去掉有"()"的形式。匹配區號3位，則本地號8位，區號4位，則本地號7位的號碼。
var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;
return this.optional(element) || (tel.test(value));
}
, "電話號碼格式不對."
);
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
// 增加只能是字母和數字的驗證
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");
/**
* 自定義驗證規則——對電話號碼進行驗證
*/
$.validator.addMethod(
"isPhone",
function(value, element)
{
// “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配電話號碼的格式多種：010-82839278、(010)82839278、01082839278等，但是，這樣有一個問題
// 如：(01082839278這樣的也會匹配。當然可以用分支條件"|"解決，比較麻煩。而且以什麼開始或結束也沒有匹配。
// 爲了簡單起見，去掉有"()"的形式。匹配區號3位，則本地號8位，區號4位，則本地號7位的號碼。
var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;
return this.optional(element) || (tel.test(value));
}
, "電話號碼格式不對."
);