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

最新推荐文章于 2024-04-15 14:11:06 发布

weixin_34247032

最新推荐文章于 2024-04-15 14:11:06 发布

阅读量282

点赞数

文章标签： javascript php ViewUI

原文链接：https://segmentfault.com/a/1190000010899435

版权

业务上需要进行验证判断，感觉一个一个写太麻烦，于是乎在网上搜索到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);
        }, "请正确填写您的手机号码");

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

分类使用，有时候我们需要进行多个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的位置问题

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