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