持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

1、什么是validate.js？

validate.js 是一个用来校验表达的JS类库，可以校验是否为空、数字、email、判断输入值范围等，也可以自自定义验证规则、提示信息。同时支持在一个输入框中使用多个校验规则。

2、使用详解

2.1、引入validate.js及jQuery

jQuery推荐大家使用3.5.1，在此之前的版本存在安全漏洞 - Vulnerable JavaScript libraries。

validate.js 下载地址

<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> 
<script type="text/javascript" src="./js/validate/jquery.validate.min.js"></script>

2.2、创建表单

<form action="#" method="post" id="submitForm">
    <label>姓名：</label>
    <input type="text" name="name" /> 
    <label>密码：</label>
    <input type="text" name="password" /> 
    <label>重复密码：</label>
    <input type="text" name="repeatPwd" /> 
    <label>年龄：</label>
    <input type="text" name="age" /> 
    <label>电话：</label>
    <input type="text" name="phone" /> 
    <label>邮箱：</label>
    <input type="text" name="email" /> 
    <label>网址校验：</label>
    <input type="text" name="url" /> 
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>

2.3、编写验证规则函数

$('#submitForm').validate({
    //具体的验证细节
    rules:{
        'name':{
            required:true,
            rangelength:[3,20]
        },
        'password':{
            required:true,
            rangelength:[6,20]
        },
        'repeatPwd':{
            required:true,
            equalTo:"[name='password']"
        },
        'age':{
            required:true,
            digits:true,
            range:[0,100]
        },
        'phone':{
            required:true,
        },
        'email':{
            required:true,
            email:true
        },
        'url':{
            required:true,
            url:true
        }
    },
    //自定义的提示信息
    messages:{
        'name':{
            required:'用户名不许为空',
            rangelength:'用户名长度在{0}~{1}之间'
        },'password':{
            required:'密码不许为空',
            rangelength:'密码长度在{0}~{1}之间'
        },
        'repeat':{
            required:'密码不许为空',
            equalTo:'两次密码输入不一致'
        },
        'age':{
            required:'年龄不许为空',
            digits:'年龄只能为数字',
            range:'年龄范围{0}~{1}',
        },
        'phone':{
            required:'电话不许为空',
        },
        'email':{
            required:'邮箱不许为空',
            email:'邮箱格式不正确'
        },
        'url':{
            required:'网址格式不许为空',
            url:'网址格式不正确'
        }
    }
});

校验结果：

常用校验规则：

校验规则	注释
required:true	必输字段
remote:"/testValidate"	ajax调用testValidate验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期
number:true	必须输入合法的数字
digits:true	必须输入整数
equalTo:"CSS选择器 e.g.#password"	输入值必须和#password相同
range:[5,10]	输入值必须介于 5 和 10 之间
rangelength:[5,10]	输入长度必须介于 5 和 10 之间，汉字算一个字符

2.4、自定义输入框的提示效果

这里我只加了最基础的颜色区分，也可以叫类似抖动效果这样。

增加CSS样式

<style type="text/css">
    .error-span{
        border:2px solid red;
    }
    .success-span{
        border:2px solid green;
    }
</style>

定义高亮展示

highlight:function(element, errorClass){
    var id = element.id;
    if(id.indexOf('.')){ 
        id = id.replace('.','\\.');
    }
    window.console.log(id);
    $('#'+id).attr('class','error-span');
},
unhighlight:function(element,errorClass){
    var id = element.id; 
    if(id.indexOf('.')){ 
        id = id.replace('.','\\.');
    }
    $('#'+id).attr('class','success-span');
}

可以看到，通过校验和不通过校验的输入框加上了对应的样式。

2.5、自定义校验提示信息的展示效果