jquery的validate插件的使用，用於校驗輸入框的輸入信息是否符合規範

①導入插件 ps： jquery插件須要先於validate插件導入

  <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery.validate.js"></script>

②validate格式：此處使用的場景是表單驗證，格式爲：

 1  1 $("#registerForm").validate({
 2  2         //表單驗證規則
 3  3         rules: {
 4  4             //使用輸入框的"name"屬性進行綁定
 5  5             username: {
 6  6                 //鍵入驗證規則，並使規則生效
 7  7                 required: true
 8  8             },
 9  9             //不一樣輸入框之間用","進行分割
10 10             password: {
11 11                 required: true
12 12             }
13 13         },
14 14         //驗證不符合條件提示錯誤信息
15 15         messages: {
16 16             username: {
17 17                 //錯誤提示信息
18 18                 required: "用戶名不能爲空!"
19 19             },
20 20             password: {
21 21                 required: "密碼不能爲空!"
22 22             }
23 23         }
24 24     })

 附上validate經常使用規則：

③validate實際應用案例，詳細代碼以下：

 1 $("#registerForm").validate({
 2         //表單驗證規則
 3         rules: {
 4             username: {
 5                 required:true
 6             },
 7             password: {
 8                 required: true,
 9                 rangelength:[5,10]
10             },
11             email:{
12                 required:true,
13                 email:true
14             },
15             name:{
16                 required:true
17             },
18             telephone:{
19                 required:true,
                   //自定義規則：檢查電話號碼格式是否正確
20                 phonenumber:true
21             }
22         },
23         //驗證不符合條件提示錯誤信息
24         messages: {
25             username:{
26                 required:"用戶名不能爲空！"
27             },
28             password:{
29                 required:"密碼不能爲空！",
30                 rangelength:"密碼長度爲5到10位！"
31             },
32             email:{
33                 required:"郵箱不能爲空！",
34                 email:"郵箱格式不正確!"
35             },
36             name:{
37                 required:"真實姓名不能爲空！"
38             },
39             telephone:{
40                 required:"電話號碼不能爲空！",
41                 phonenumber:"電話號碼格式不正確！"
42             }
43         }
44     })

 

實現效果以下：

④validate自定義規則：經常使用規則表中沒有規則對電話號碼格式進行校驗，此時咱們就須要自定義規則對其校驗，格式以下：

$.validator.addMethod("Methodname",function,msg)
//Methodname:自定義校驗規則的名字（該場景爲phonenumber）
//fn函數：處理校驗規則的具體邏輯
//msg:默認錯誤提示信息
/**
/*fn函數詳細解析
/*function（value,element,params）{
//value:被校驗的標籤的value值=>input.vlaue
//element:被校驗 的整個標籤對象=>電話號碼輸入框（input）
//params：被校驗規則的值=>required:true
}

 

具體代碼以下：

 1    $.validator.addMethod("phonenumber", function (value, element, params) {
 2         //處理得具體的校驗規則
 3         if (params) {
 4             //生成手機號的正則校驗規則
 5             var phoneReg = new RegExp("^1[35789]\\d{9}$");   //規則釋義：電話號碼必須以1開頭，第二位必須爲35789中一位，後9位爲天然基數[0-9]中任意一位
 6             //對輸入框輸入的手機號進行正則校驗
 7             var b = phoneReg.test(value);
 8             if (b) {
 9                 return true
10             }
11         }
12         return false;
13     })

 

 實現效果：

此時電話號碼只有10位 提示錯誤信息

      此時電話號碼有11位  不報錯