Jquery的验证插件Validate.js

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



结果为：