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

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

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

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

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

 附上validate常用規則：

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

$("#registerForm").validate({
        //表單驗證規則
        rules: {
            username: {
                required:true
            },
            password: {
                required: true,
                rangelength:[5,10]
            },
            email:{
                required:true,
                email:true
            },
            name:{
                required:true
            },
            telephone:{
                required:true,
                   //自定義規則：檢查電話號碼格式是否正確
                phonenumber:true
            }
        },
        //驗證不符合條件提示錯誤信息
        messages: {
            username:{
                required:"用戶名不能為空！"
            },
            password:{
                required:"密碼不能為空！",
                rangelength:"密碼長度為5到10位！"
            },
            email:{
                required:"郵箱不能為空！",
                email:"郵箱格式不正確!"
            },
            name:{
                required:"真實姓名不能為空！"
            },
            telephone:{
                required:"電話號碼不能為空！",
                phonenumber:"電話號碼格式不正確！"
            }
        }
    })

 

實現效果如下：

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

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

 

具體代碼如下：

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

 

 實現效果：

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

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