js插件使用:jQuery-Validate 表单验证插件的使用

业务上需要进行验证判断,感觉一个一个写太麻烦,于是乎在网上搜索到jQuery-Validate这个表单插件

首先需要引入jquery包

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

https://jqueryvalidation.org/官网下载好插件后引入使用。

使用下载后包中的 messages_zh.js或者messages_zh.min.js 就是简体中文的消息语言包

引入jquery.validate.min.js和messages_zh.min.js 开始使用
默认校验规则
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

demo:

$('#add-admin-form').validate({
    rules:{
        role: "required",
        userName:{
            required: true,
            maxlength: 20
        },
        realName:{
            required: true,
            maxlength: 20
        }
    },
    messages:{
        role: "请选择您的角色",
        userName:{
            required: "请输入用户名",
            maxlength: "用户名过长"
        },
        realName:{
            required: "请输入用户名",
            maxlength: "真是姓名过长"
        }
    }
})

rlues代表验证规则;
messages:标验证错误后显示的文字
其中role、realName等字段都是表单中input的name值

用以下方法使用自定义验证,这里的自定义验证有点不太一样,需要先新增自定义方法 然后进行form表单验证的时候进行试用

 jQuery.validator.addMethod("isPhone", function (value, element) {
            return /^0?(13[0-9]|15[012356789]|17[0135678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
        }, "请正确填写您的手机号码");

clipboard.png

通过以上方法进行验证可以实现自定义;

分类使用,有时候我们需要进行多个input 或者select的联合验证 这时候就可以使用groups

$('#add-admin-form').validate({
            groups: {
                username: "province city district"   //username定义的组名,province city district 是元素name
            },
            rules: {
                role: "required",
                userName: {
                    required: true,
                    maxlength: 20
                },
                realName: {
                    required: true,
                    maxlength: 20
                },
                phone: {
                    isPhone: true
                },
                gender: {
                    isGender: true,
                },
                province: {
                    isPlace: true
                },
                city: {
                    isPlace: true
                },
                district: {
                    isPlace: true
                },
                school: "required"
            },
            messages: {
                role: "请选择您的角色",
                userName: {
                    required: "请输入用户名",
                    maxlength: "用户名过长"
                },
                realName: {
                    required: "请输入用户名",
                    maxlength: "真是姓名过长"
                },
                phone: "请输入正确的手机号",
                gender: {
                    isGender: "请选择您的性别"
                },
                province: "请选择您的所在地",
                city: "请选择您的所在地",
                district: "请选择您的所在地",
                school: "请选择您的学校"
            },
            errorPlacement: function (error, element) {  //错误提示在什么地方
                if (element.attr("name") == "province" || element.attr("name") == "city" || element.attr("name") == "district") {
                    error.insertAfter("#district");    //如果是fname和lname呢,就#lastname后面
                } else {
                    error.insertAfter(element);
                }
            },
        })

其中groups和errorPlacement是必不可少的,前者进行关于元素的分组处理,后者进行处理操作后error的位置问题

clipboard.png
用空格隔开后分别定义多个元素

clipboard.png
在rules中也要定义它自己的规则 同样可使用required或者自定义判断都可以

clipboard.png
同样消息也是用同样的方法

clipboard.png
errorPlacement书体不过if else 进行分类处理 定位error的表示位置

radiobox和checkbox效果好像没出来 我使用自定义函数实现的 以后琢磨琢磨

阅读 2k

推荐阅读