一、目的
為了更好地實現人機交互，使用jQuery封裝庫中的validate插件，在用戶填寫表單時，可以快速地對用戶填寫的數據進行驗證，并做出反饋。
二、validate插件簡介
validate()是插件的核心方法，定義了基本的校驗規則和一些有用的配置項。
required:必填
minlength:最小長度
maxlength:最大長度
rangelength:長度范圍，以數組呈現[2，10]，表示表單輸入長度為2到10位
remote:可以通過發現GET或者POST請求進行遠程驗證，與Ajax的驗證進行比較。就是通過ajax實現的
｛
url:
type:默認為GET請求
data:發送的數據
｝
發送GET請求例子：
check:{ required:true, remote:{ url:"__CONTROLLER__/check?check="+$("#icode").val //__CONTROLLER__表示當前控制器 } }基本的校驗規則
| 序號 | 規則 | 描述 |
|---|---|---|
| 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。 |
validator對象
validator對象的靜態方法
$.validator.addClassRules({ txt:{ required:true, rangelength:[2,10] }})//這時class="txt"的類都具備了這個兩個驗證規則獲取表單元素的驗證規則：
$("#username").rules();為表單元素添加驗證規則：
$("#username").rules('add',rules); 為表單元素刪除驗證規則：
$("#username").rules('remove',rules);三、正則表達式
常用正則表達式：
用戶名的正則表達式驗證：/^[/w/u4e00-/u9fa5]{2,10}/g(含漢字)
用戶名驗證：/^/w{2,10}$/(不含漢字，只允許英文字母、數字和下畫線，長度為2-10位)
QQ號驗證:/^[1,9][0,9]{4,19}$/（第一位數字不為0，5-19位數字）
郵箱驗證：/^[a-z0-9]+@([a-z0-9]+/.)+[a-z]{2,4}$/i(不區分大小寫)
密碼驗證：/^/w{6,16}$/(只允許6-16位英文字母、數字和下畫線)
手機號驗證：/^1[3,5,7,8]/d{9}$/
URL驗證：/^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__表示當前控制器 //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:"*請輸入正確的網頁地址！", }, check:{ required:"*必填！", remote:"*驗證碼有誤！", }, }, //是否在獲取焦點時驗證 //onfocusout:false, //是否在敲擊鍵盤時驗證 //onkeyup:false, //提交表單后，（第一個）未通過驗證的表單獲得焦點 focusInvalid:true, //當未通過驗證的元素獲得焦點時，移除錯誤提示 focusCleanup:true, }); //自定義正則表達示驗證方法 $.validator.addMethod("checkQQ",function(value,element,params){ var checkQQ = /^[1-9][0-9]{4,19}$/; return this.optional(element)||(checkQQ.test(value)); },"*請輸入正確的QQ號碼！"); $.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位英文字母、數字或者下畫線！"); }); 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
