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位  不报错