首页 » jQuery » Jquery的验证插件Validate.js

Jquery的验证插件Validate.js

原文 http://blog.csdn.net/Mynewclass/article/details/79106179

2018-01-20 02:00:15阅读(557)

最近使用到了验证这一功能,验证一般分为前台验证、后台验证两种。之前记录的关于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>

Jquery的验证插件Validate.js

之后创建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'
                    }
                }
            });
        });

之后的效果初步形成
Jquery的验证插件Validate.js

三、其他配置事项

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

errPlacement:Callback

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

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

Jquery的验证插件Validate.js
2、验证的触发方式

之前的debug模式就是验证触发方式之一。
Jquery的验证插件Validate.js

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文件
Jquery的验证插件Validate.js
再加入到messages_zh.js文件中消息提示
Jquery的验证插件Validate.js

结果为:
Jquery的验证插件Validate.js

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹