jquery validate表單驗證介紹

• validate插件簡介  
  官方網站：jQuery Validation Plugin
  學習案例：菜鳥教程
  validate()是插件的核心方法，定義了基本的校驗規則和配置項。
  rule:設置表單的驗證規則；
  messages:設置表單不符合驗證規則的提示信息；
  debug:開發調試，爲true只驗證不提交表單；
•  基本的校驗規則

序號	規則	描述
1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調用 check.php 驗證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網址。
5	date:true	必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7	number:true	必須輸入合法的數字（負數，小數）。
8	digits:true	必須輸入整數。
9	creditcard:	必須輸入合法的信用卡號。
10	equalTo:"#field"	輸入值必須和 #field 相同。
11	accept:	輸入擁有合法後綴名的字符串（上傳文件的後綴）。
12	maxlength:5	輸入長度最可能是 5 的字符串（漢字算一個字符）。
13	minlength:10	輸入長度最小是 10 的字符串（漢字算一個字符）。
14	rangelength:[5,10]	輸入長度必須介於 5 和 10 之間的字符串（漢字算一個字符）。
15	range:[5,10]	輸入值必須介於 5 和 10 之間。
16	max:5	輸入值不能大於 5。
17	min:10	輸入值不能小於 10。

required:必填
minlength:最小長度
maxlength:最大長度
rangelength:長度範圍，以數組呈現[2，10]，表示表單輸入長度爲2到10位
remote:能夠經過GET或POST請求進行遠程驗證，經過ajax實現的
{
    url:
    type:默認爲GET請求
    data:發送的數據
｝
發送GET請求例子：
check:{
    required:true,
    remote:{
        url:"__CONTROLLER__/check?check="+$("#icode").val()
        //__CONTROLLER__表示當前控制器
    }
} 

• validator對象

validator.form()驗證表單是否有效，返回true或者false;
validator.element(element)驗證表單中某個元素是否有效，返回true或者false;
validator.resetForm()把表單恢復到驗證前原來的狀態；
validator.showErrors(error)針對元素顯示特定的錯誤信息；
validator.numberOfInvalids()返回無效的元素數量；

• validator對象的靜態方法

jQuery.validator.addMethod()增長自定義的驗證方法;  （即$.validator.addMethod()）
jQuery.validator.format()格式化字符串，用參數代替模板中的｛n｝;
jQuery.validator.setDefaults()修改插件默認設計；
jQuery.validator.addClassRules()爲某些包含名爲name的class增長組合驗證類型。

• 驗證規則

獲取表單元素的驗證規則：    $("#username").rules();
爲表單元素添加驗證規則：    $("#username").rules('add',rules); 
爲表單元素刪除驗證規則：    $("#username").rules('remove',rules);

• 正則表達式

手機號驗證：/^1[3,5,7,8]\d{9}$/
金額：/^\d+\.?\d{0,2}$/
8-15位數字：/\d{6,15}$/
URL驗證：/^http:\/\/[a-z\d-]+(\w\/)+)$/i

• 案例

$(document).ready(function(){
	$("#form-add").validate({
		rules:{
			name:{
				required:true,					
			},
			password:{
				required:true,
				checkPwd:true,
			},
			confirm_pwd:{
				required:true,
				equalTo:password,
			},
			email:{
				required:true,
				checkEmail:true,
			}
			check:{
				//required:true,
				//remote:{
					//url:"__CONTROLLER__/check?check="+$("#icode").val,
					//__CONTROLLER__表示當前控制器
					//dataType:"json",
				//}
			}
		},
		messages:{
			name:{
				required:"*必填！",
			},
			password:{
				required:"*必填！",
				rangelength:"*長度爲6到16位！",
			},
			confirm_pwd:{
				required:"*必填！",
				equalTo:"*兩次輸入的密碼不一致！"
			},
			email:{
				required:"*必填！",
				email:"*請輸入正確的郵箱！",
			},
			check:{
				required:"*必填！",
				remote:"*驗證碼有誤！",
			},
		},
		//是否在獲取焦點時驗證
		//onfocusout:false,
		//是否在敲擊鍵盤時驗證
		//onkeyup:false,
		//提交表單後，（第一個）未經過驗證的表單得到焦點
		focusInvalid:true,
		//當未經過驗證的元素得到焦點時，移除錯誤提示
		focusCleanup:true,
	});

	//自定義正則表達示驗證方法
	$.validator.addMethod("checkEmail",function(value,element,params){
			var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;
			return this.optional(element)||(checkEmail.test(value));
		},"*請輸入正確的郵箱！");
		
	$.validator.addMethod("checkName",function(value,element,params){
			var checkName = /^\w{2,10}$/g;
			return this.optional(element)||(checkName.test(value));
		},"*只容許2-10位英文字母、數字或者下畫線！");
	
	$.validator.addMethod("checkPwd",function(value,element,params){
			var checkPwd = /^\w{6,16}$/g;
			return this.optional(element)||(checkPwd.test(value));
		},"*只容許6-16位英文字母、數字或者下畫線！");
});