這篇文章主要介紹了jquery中validate如何實(shí)現(xiàn)表單驗(yàn)證，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
一、目的
為了更好地實(shí)現(xiàn)人機(jī)交互，使用jQuery封裝庫中的validate插件，在用戶填寫表單時(shí)，可以快速地對(duì)用戶填寫的數(shù)據(jù)進(jìn)行驗(yàn)證，并做出反饋。
二、validate插件簡介
validate()是插件的核心方法，定義了基本的校驗(yàn)規(guī)則和一些有用的配置項(xiàng)。
rule:設(shè)置表單的驗(yàn)證規(guī)則；
messages:設(shè)置表單不符合驗(yàn)證規(guī)則的提示信息；
debug:如果這個(gè)參數(shù)為true,那么表單還會(huì)提交，只進(jìn)行檢查，調(diào)試時(shí)十分方便。
required:必填
minlength:最小長度
maxlength:大長度
rangelength:長度范圍，以數(shù)組呈現(xiàn)[2，10]，表示表單輸入長度為2到10位
remote:可以通過發(fā)現(xiàn)GET或者POST請求進(jìn)行遠(yuǎn)程驗(yàn)證，與Ajax的驗(yàn)證進(jìn)行比較。就是通過ajax實(shí)現(xiàn)的
｛
url:
type:默認(rèn)為GET請求
data:發(fā)送的數(shù)據(jù)
｝
發(fā)送GET請求例子：
重慶分公司
重慶分公司
check:{
required:true,
remote:{
url:"__CONTROLLER__/check?check="+$("#icode").val
//__CONTROLLER__表示當(dāng)前控制器
}
}基本的校驗(yàn)規(guī)則
| 序號(hào) | 規(guī)則 | 描述 |
|---|---|---|
| 1 | required:true | 必須輸入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值。 |
| 3 | email:true | 必須輸入正確格式的電子郵件。 |
| 4 | url:true | 必須輸入正確格式的網(wǎng)址。 |
| 5 | date:true | 必須輸入正確格式的日期。日期校驗(yàn) ie6 出錯(cuò)，慎用。 |
| 6 | dateISO:true | 必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗(yàn)證格式，不驗(yàn)證有效性。 |
| 7 | number:true | 必須輸入合法的數(shù)字（負(fù)數(shù)，小數(shù)）。 |
| 8 | digits:true | 必須輸入整數(shù)。 |
| 9 | creditcard: | 必須輸入合法的信用卡號(hào)。 |
| 10 | equalTo:"#field" | 輸入值必須和 #field 相同。 |
| 11 | accept: | 輸入擁有合法后綴名的字符串（上傳文件的后綴）。 |
| 12 | maxlength:5 | 輸入長度最多是 5 的字符串（漢字算一個(gè)字符）。 |
| 13 | minlength:10 | 輸入長度最小是 10 的字符串（漢字算一個(gè)字符）。 |
| 14 | rangelength:[5,10] | 輸入長度必須介于 5 和 10 之間的字符串（漢字算一個(gè)字符）。 |
| 15 | range:[5,10] | 輸入值必須介于 5 和 10 之間。 |
| 16 | max:5 | 輸入值不能大于 5。 |
| 17 | min:10 | 輸入值不能小于 10。 |
validator對(duì)象
validator.form()驗(yàn)證表單是否有效，返回true或者false;
validator.element(element)驗(yàn)證表單中某個(gè)元素是否有效，返回true或者false;
validator.resetForm()把表單恢復(fù)到驗(yàn)證前原來的狀態(tài)；
validator.showErrors(error)針對(duì)元素顯示特定的錯(cuò)誤信息；
validator.numberOfInvalids()返回?zé)o效的元素?cái)?shù)量；
validator對(duì)象的靜態(tài)方法
jQuery.validator.addMethod()增加自定義的驗(yàn)證方法; （即$.validator.addMethod()）
jQuery.validator.format()格式化字符串，用參數(shù)代替模板中的｛n｝;
jQuery.validator.setDefaults()修改插件默認(rèn)設(shè)計(jì)；
jQuery.validator.addClassRules()為某些包含名為name的class增加組合驗(yàn)證類型。
$.validator.addClassRules({
txt:{
required:true,
rangelength:[2,10]
}
})//這時(shí)class="txt"的類都具備了這個(gè)兩個(gè)驗(yàn)證規(guī)則獲取表單元素的驗(yàn)證規(guī)則：
$("#username").rules();為表單元素添加驗(yàn)證規(guī)則：
$("#username").rules('add',rules);為表單元素刪除驗(yàn)證規(guī)則：
$("#username").rules('remove',rules);三、正則表達(dá)式
常用正則表達(dá)式：
用戶名的正則表達(dá)式驗(yàn)證：/^[\w\u4e00-\u9fa5]{2,10}/g(含漢字)
用戶名驗(yàn)證：/^\w{2,10}$/(不含漢字，只允許英文字母、數(shù)字和下畫線，長度為2-10位)
QQ號(hào)驗(yàn)證:/^[1,9][0,9]{4,19}$/（第一位數(shù)字不為0，5-19位數(shù)字）
郵箱驗(yàn)證：/^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i(不區(qū)分大小寫)
密碼驗(yàn)證：/^\w{6,16}$/(只允許6-16位英文字母、數(shù)字和下畫線)
手機(jī)號(hào)驗(yàn)證：/^1[3,5,7,8]\d{9}$/
URL驗(yàn)證：/^http:\/\/[a-z\d-]+(\w\/)+)$/i
$(document).ready(function(){
$("#table").validate({
rules:{
admin_name:{
required:true,
checkName:true,
},
name:{
required:true,
},
admin_pwd:{
required:true,
checkPwd:true,
},
con_pwd:{
required:true,
equalTo:admin_pwd,
},
email:{
required:true,
checkEmail:true,
},
qq:{
required:true,
checkQQ:true,
},
s_page:{
url:true,
},
check:{
//required:true,
//remote:{
//url:"__CONTROLLER__/check?check="+$("#icode").val,
//__CONTROLLER__表示當(dāng)前控制器
//dataType:"json",
//}
}
},
messages:{
admin_name:{
required:"*必填！",
rangelength:"*長度為2到10位！",
},
name:{
required:"*必填！",
},
admin_pwd:{
required:"*必填！",
rangelength:"*長度為6到16位！",
},
con_pwd:{
required:"*必填！",
equalTo:"*兩次輸入的密碼不一致！"
},
email:{
required:"*必填！",
email:"*請輸入正確的郵箱！",
},
qq:{
required:"*必填！",
},
s_page:{
url:"*請輸入正確的網(wǎng)頁地址！",
},
check:{
required:"*必填！",
remote:"*驗(yàn)證碼有誤！",
},
},
//是否在獲取焦點(diǎn)時(shí)驗(yàn)證
//onfocusout:false,
//是否在敲擊鍵盤時(shí)驗(yàn)證
//onkeyup:false,
//提交表單后，（第一個(gè)）未通過驗(yàn)證的表單獲得焦點(diǎn)
focusInvalid:true,
//當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示
focusCleanup:true,
});
//自定義正則表達(dá)示驗(yàn)證方法
$.validator.addMethod("checkQQ",function(value,element,params){
var checkQQ = /^[1-9][0-9]{4,19}$/;
return this.optional(element)||(checkQQ.test(value));
},"*請輸入正確的QQ號(hào)碼！");
$.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位英文字母、數(shù)字或者下畫線！");
$.validator.addMethod("checkPwd",function(value,element,params){
var checkPwd = /^\w{6,16}$/g;
return this.optional(element)||(checkPwd.test(value));
},"*只允許6-16位英文字母、數(shù)字或者下畫線！");
});感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jquery中validate如何實(shí)現(xiàn)表單驗(yàn)證”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
