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

wenyiweb 发布于2019-08-20 19:00 / 3301人阅读

摘要：使用下载后包中的或者就是简体中文的消息语言包引入和开始使用默认校验规则必须输入的字段。使用方法调用验证输入值。日期校验出错，慎用。必须输入合法的信用卡号。输入拥有合法后缀名的字符串上传文件的后缀。

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

首先需要引入jquery包

在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的位置问题

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

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

同样消息也是用同样的方法

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85012.html

表单验证工具 jquery-validation Vs Parsley

摘要：号称不用写一行代码就能验证表单。动态表单验证现在更聪明，它会自动检测您的表单的修改并相应地调整其验证。简单地添加，删除或编辑字段，将会自动验证。还有好多手机号码格式有误请填写手机号验证表单注意是我自定义的验证规则，添加到里面的基本对比名称 gitbub地址 stars 文档地址 jquery-validation 这里 7859(截止7/21) 这里 Parsley....

bluesky 2019-08-20 18:12 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高胜山 2019-08-26 13:44 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 评论0 收藏0
前端相关汇总

摘要：简介前端发展迅速，开发者富有的创造力不断的给前端生态注入新生命，各种库框架工程化构建工具层出不穷，眼花缭乱，不盲目追求前沿技术，学习框架和库在满足自己开发需求的基础上，然后最好可以对源码进行调研，了解和深入实现原理，从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0