Jquery的验证插件Validate.js

最新推荐文章于 2022-11-13 11:34:52 发布

J-Jian

最新推荐文章于 2022-11-13 11:34:52 发布

阅读量831

点赞数

分类专栏： Jquery 文章标签： validation jquery

本文链接：https://blog.csdn.net/mynewclass/article/details/79106179

版权

Jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近使用到了验证这一功能，验证一般分为前台验证、后台验证两种。之前记录的关于Spring MVC 验证注解@Validation的是属于后台验证。而现在要介绍的是属于Jquery前台验证。

一、Validation插件功能介绍

封装了必填、数字、Email、URL等的十几种验证规则。
也可以自定义验证规则，增强验证规则。
强大的验证信息提示，可以使用默认的验证信息提示，也可以自定义的覆盖。
不同的验证方式：可以是debug式的验证，不用提交表单。也可以使实时验证keyup或者blur事件触发验证，不需要提交时才验证。

二、Validate插件的简单使用步骤

1、引入必要的jquery插件文件
至少需要引入必要的两个文件
官方下载插件地址https://jqueryvalidation.org/
在dist目录中找到validate.js文件

<script src="src/jquery/jquery-3.2.1.js"></script>
<script src="src/jquery/jquery.validate.js"></script>

2、了解校验规则

required:true 必须输入的字段
remote:’check_xxx.action’ 使用ajax异步远程验证输入值
email:true 必须输入正确格式的电子邮件
url：true 必须输入正确格式的url网址
date：true 必须输入正确格式的日期
digits：true 必须输入整数
creditcard：true 比如输入合法的信用卡号
equalTo: ‘#selector’ 输入的值必须和#selector相同
accept : 输入拥有合法后缀名的字符串，可是上传的文件名后缀
maxlength：num 输入长度最多为num的字符串。
minlength：num 输入长度最小是num的字符串
ranggelength：[min,max] 输入长度最小为min，最长为max的字符串
range：[min，max]输入值介于min与max之间
max：num 输入值不能大于num
min ：num 输入值不能小于num

3.引入信息提示文件
该插件提供了默认的信息提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

我们可以改为中文信息提示，只需要找到dist/localization/messages_zh.js文件引入即可。

<script src="src/jquery/messages_zh.js"></script>

该文件的内容如下：

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend( $.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format( "最多可以输入 {0} 个字符" ),
    minlength: $.validator.format( "最少要输入 {0} 个字符" ),
    rangelength: $.validator.format( "请输入长度在 {0} 到 {1} 之间的字符串" ),
    range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),
    max: $.validator.format( "请输入不大于 {0} 的数值" ),
    min: $.validator.format( "请输入不小于 {0} 的数值" )
} );

4.校验规则写入js文件
首先html创建了form表单

<form id="userForm" action="www.baidu.com" method="post">
    帐号：<input type="text" name="account" value="" class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" /></br>
    密码：<input type="password" id="password" name="password" value=""/></br>
    确认密码：<input type="password" name="againPassword" value=""/></br>
    邮箱：<input type="text" name="email" value=""/></br>
    爱好：
            上网<input type="checkbox" name="hobby" value="旅游"/>
            唱歌<input type="checkbox" name="hobby" value="唱歌"/>
            编程<input type="checkbox" name="hobby" value="编程"/>
            书法<input type="checkbox" name="hobby" value="骑行"/><br/>
        URL：<input type="text" name="url" /></br>
        照片：<input type="file" name="image"></br>
        <input type="submit" value="提交">
    </form>

这里写图片描述

之后创建js校验规则文件

格式为json格式，主要常用的有rules规则定制，与messages的信息定制（实际为将默认的英文消息覆盖）
其中使用debug模式，方便调试。

        $(function(){
            $('#userForm').validate({
                debug:true, //debug模式：验证成功也不会跳转action

                //规则定制
                rules:{
                    account:{
                        required:true,
                        rangelength:[6,12]
                    },
                    password:{
                        required:true,
                        rangelength:[6,12]
                    },
                    againPassword:{
                        required:true,
                        equalTo:'#password'
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    url:{
                        required:true,
                        url:true
                    },
                    image:{
                        required:true,
                        extension:'gif|jpe?g|png'
                    }
                },
                //消息定制
                messages:{
                    account:{
                        required:"账号不能为空",
                        rangelength:$.validator.format('请输入长度为6-12的帐号')
                    },
                    password:{
                        required:' 密码不能为空',
                        rangelength:$.validator.format('请输入长度为6-12的密码')
                    },
                    againPassword:{
                        required:'密码不能为空',
                        equalTo:'您输入的两个密码不一致'
                    },
                    email:{
                        required:'邮箱不能为空',
                        email:'请输入正确的邮箱'
                    },
                    url:{
                        required:'网址URL不能为空',
                        url:'请输入正确的URL（以http://开头）'
                    },
                    image:{
                        required:'请上传你的照片',
                        extension:'照片后缀必须为：gif、jpeg、jpg、png'
                    }
                }
            });
        });

之后的效果初步形成
这里写图片描述

三、其他配置事项

1、更改错误信息提示的位置

errPlacement:Callback

是更改错误提示信息的位置，默认的是将错误信息放在验证的元素后面并且以label标签展示

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

这里写图片描述
2、验证的触发方式

之前的debug模式就是验证触发方式之一。
这里写图片描述

3.自定义验证
自定义验证需要引入additional-method.js文件，在其中增加自定义的方法。
使用addMethod: name, method, message格式

name:添加方法的名字
method：是一个callback函数function(value,element,param)，其中三个参数：value是元素的值，element是元素本身。param是参数
message：错误消息的提示。
比如现在我们只需要输入一个整数（0-9）的验证方法，代码如下：

自定义inr方法

$.validator.addMethod("int",function(value,element,params){  
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
    }, $.validator.format( "请输入{0}至{1}的整数" ));

则在校验写入js时候，需要输入的name=”int”

int:{
    int:[0,9]
}

其中[0,9] 就是param参数传递的值

将此代码加入additional-method.js文件或者自定义自己的js文件
这里写图片描述
再加入到messages_zh.js文件中消息提示

结果为：
这里写图片描述

J-Jian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery的验证插件Validate.js

最近使用到了验证这一功能，验证一般分为前台验证、后台验证两种。之前记录的关于Spring MVC 验证注解@Validation的是属于后台验证。而现在要介绍的是属于Jquery前台验证。一、Validation插件功能介绍封装了必填、数字、Email、URL等的十几种验证规则。也可以自定义验证规则，增强验证规则。强大的验证信息提示，可以使用默认的验证信息提示，也可以自定义的覆盖
复制链接

扫一扫

专栏目录