jQuery validate表單驗證

2022-05-29 12:03:11 字數 3532 閱讀 2420

validate外掛程式簡介

validate()是外掛程式的核心方法,定義了基本的校驗規則和一些有用的配置項。

required:必填

minlength:最小長度

maxlength:最大長度

rangelength:長度範圍,以陣列呈現[2,10],表示表單輸入長度為2到10位

remote:可以通過發現get或者post請求進行遠端驗證,與ajax的驗證進行比較。就是通過ajax實現的

{url:

type:預設為get請求

data:傳送的資料

}傳送get請求例子:

check:}序號

規則描述

1required:true

必須輸入的字段。

2remote:"check.php"

使用 ajax 方法呼叫 check.php 驗證輸入值。

3email:true

必須輸入正確格式的電子郵件。

4url:true

必須輸入正確格式的**。

5date:true

必須輸入正確格式的日期。日期校驗 ie6 出錯,慎用。

6dateiso:true

必須輸入正確格式的日期(iso),例如:2009-06-23,1998/01/22。只驗證格式,不驗證有效性。

7number:true

必須輸入合法的數字(負數,小數)。

8digits:true

必須輸入整數。

9creditcard:

必須輸入合法的信用卡號。

10equalto:"#field"

輸入值必須和 #field 相同。

11accept:

輸入擁有合法字尾名的字串(上傳檔案的字尾)。

12maxlength:5

輸入長度最多是 5 的字串(漢字算乙個字元)。

13minlength:10

輸入長度最小是 10 的字串(漢字算乙個字元)。

14rangelength:[5,10]

輸入長度必須介於 5 和 10 之間的字串(漢字算乙個字元)。

15range:[5,10]

輸入值必須介於 5 和 10 之間。

16max:5

輸入值不能大於 5。

17min:10

輸入值不能小於 10。

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增加組合驗證型別。

$.validator.addclassrules(

})//這時class="txt"的類都具備了這個兩個驗證規則

三、正規表示式

常用正規表示式:

使用者名稱的正規表示式驗證:/^[\w\u4e00-\u9fa5]/g(含漢字)

使用者名稱驗證:/^\w$/(不含漢字,只允許英文本母、數字和下畫線,長度為2-10位)

qq號驗證:/^[1,9][0,9]$/(第一位數字不為0,5-19位數字)

郵箱驗證:/^[a-z0-9]+@([a-z0-9]+\.)+[a-z]$/i(不區分大小寫)

密碼驗證:/^\w$/(只允許6-16位英文本母、數字和下畫線)

手機號驗證:/^1[3,5,7,8]\d$/

url驗證:/^http:\/\/[a-z\d-]+(\w\/)+)$/i

$(document).ready(function(),  

name:,  

admin_pwd:,  

con_pwd:,  

email:,  

required:true,  

},  

s_page:,  

check:  

}  },  

messages:,  

name:,  

admin_pwd:,  

con_pwd:,  

email:,  

required:"*必填!",  

},  

s_page:,  

check:,  

},  

//是否在獲取焦點時驗證  

//onfocusout:false,  

//是否在敲擊鍵盤時驗證  

//onkeyup:false,  

//提交表單後,(第乙個)未通過驗證的表單獲得焦點  

focusinvalid:true,  

//當未通過驗證的元素獲得焦點時,移除錯誤提示  

focuscleanup:true,  

});  

//自定義正則表達示驗證方法  

$.validator.addmethod("checkqq",function(value,element,params)$/;  

return this.optional(element)||(checkqq.test(value));  

},"*請輸入正確的qq號碼!");  

$.validator.addmethod("checkemail",function(value,element,params)$/i;  

return this.optional(element)||(checkemail.test(value));  

},"*請輸入正確的郵箱!");  

$.validator.addmethod("checkname",function(value,element,params)$/g;  

return this.optional(element)||(checkname.test(value));  

},"*只允許2-10位英文本母、數字或者下畫線!");  

$.validator.addmethod("checkpwd",function(value,element,params)$/g;  

return this.optional(element)||(checkpwd.test(value));  

},"*只允許6-16位英文本母、數字或者下畫線!");  

});  

jquery validate 校驗心得

1.rule 裡面的設定的各個項是以name 做為關鍵字,莫以id做為唯一值。謹記 2.jquery.validator.format 的使用列子 button click function this is alert str str jquery.validator.format str,worl...

jQuery Validate外掛程式使用

這幾天一直在接觸驗證方面的工作,jquery validate是乙個比較常用的驗證外掛程式,說一下心得吧。效果圖類似 說乙個簡單的,現在需求是模板編號只能是正整數數字。控制項 如下 模板編號 接下來就是使用jquery了,第一步肯定是匯入js庫了,這個不用說,第二步開始寫js 解釋一下吧,首先jqu...

jQuery Validate 觸發機制

lang en charset utf 8 titletitle src jquery 1.11.2.js script src jquery.validate.min.js script document ready function 15 0 9 18 0 9 d test value 請正確填...