表单验证插件Validate.js的使用

表单验证插件（validate.js），是一款验证常规表单数据合法性的插件。使用该插件可以极大的简化了在表单上繁杂的验证过程，并且错误提示显示的完善也增加了用户体验。

1. 使用 validate.js 插件

下载validate.js插件：

可以通过官网：http://bassistance.de/jquery-plugins/jquery-plugin-validation

也可以从我上传的资源中下载：http://download.csdn.net/detail/u014607184/9523213

该插件文档中最重要的文件是 validate.js，还有两个可选的辅助文件：additional-methods.js（控件 class方式）和 message_zh.js（提示汉化）文件。由于message_zh.js文档较小，如果要使用汉化提示，可以直接将validate.js文档中相应的代码替换成message_zh.js中的代码。

使用validate.js 插件第一步需要引入jquery以及下载的validate.js（jquery需要在插件之前引入）

<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

1
2
第二步：在 JS 文件对相应的form调用validate()

$('#reg').validate();

1

2. 常用默认验证规则

规则名	说明
required:true	必须输入字段
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期（IE6 验证出错）
dateISO:true	必须输入正确格式的日期(ISO) （只验证格式， 不验证有效）
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入正整数
creditcard:true	必须输入合法的信用卡号，例如：5105105105105100
equalTo:”#field”	输入值必须和#field 相同
minlength:5	输入长度最小是 5 的字符串(汉字算一个字符)
maxlength:10	输入长度最多是 10 的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度介于 5 和 10 之间的字符串”)(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
min:5	输入值不能小于 5
max:10	输入值不能大于 10
remote:”check.php”	使用 ajax 方法调用 check.php 验证输入值

Validate.js 的默认验证规则的写法有两种形式：（1）控件属性方式；（2）JS 键值对传参方式。我们通过验证用户名跟邮箱来展示其用法：

（1）控件属性方式

<form id="reg" action="123.html">
<p>账号：<input class="required" minlength="2" type="text" name="user" value="" /></p>
<p>邮箱：<input class="required email" type="text" name="email" value="" /></p>
<input type="submit" value="提交" />
</form>

1
2
3
4
5
这种方法直接在html标签上设置其属性，不需要过多的去写JS代码。但是如果需要控制的属性较多的属性时，就会使得html标签过于冗长。而且这种形式不能设置指定的错误提示信息，因此大部分情况下我们会使用第二种方法。

（2）JS 键值对传参方式

$(function(){

$('#reg').validate({

rules : {
user : {
required : true,
minlength : 2
},
email : {
required : true,
email : true
}
},

messages : {
user : {
required : '帐号不得为空！',   // 提示信息可以自己定义
minlength : '帐号不得小于 2 位！',
},
email : {
required : '帐号不得为空！',
email : '注意！请输入正确的邮箱格式',
},
}
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3. validate()的方法和选项

3.1 jQuery.format 格式化错误提示

当我们根据需求修改默认验证规则时，也需要在提示错误信息时对应的显示，因此就可以用到格式化错误提示，就比如我们修改了上述的账号的长度为3~5：

$(function(){

$('#reg').validate({

rules : {
user : {
required : true,
rangelength:[3,5]
}
},

messages : {
user : {
required : '帐号不得为空！',
rangelength : '帐号长度需要在 {0}-{1} 位之间！', //{}表示对应的第几个数
},
}
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3.2 开启调试模式禁止提交

当我们在调试时，只需要检测能否验证，而不需要页面进行跳转时，可以开启调试模式禁止提交

$('#reg').validate({
debug : true,
});

1
2
3
如果有多个表单，为了不需要每个表单下都写一遍上述代码，可以在全局环境下设置调试模式

$.validator.setDefaults({
debug : true,
});

1
2
3
当我们需要阻止表单提交的时候，还要执行程序，这时就可以设置其他方式代替默认提交

$('#reg').validate({
submitHandler : function(){
// some action
},
});

1
2
3
4
5
该函数内程序是当验证成功后执行，而且阻止了默认提交，一般用于ajax提交使用。

3.3 设置成功后加载的样式

Validate.js插件内置的验证成功的样式为”valid”，我们可以在CSS样式中自定义valid的样式：

.valid{
background: url(right.png) no-repeat right;
background-size: auto 100%;
border: 2px solid green;
}

1
2
3
4
5
这样输入的格式如果通过验证，即可显示相应的格式。我在上述样式中设置成如果验证成功，即将input输入框边框设置为绿色并且添加一个绿色小勾，当输入验证通过得到结果为：



当然，也可以修改验证提示消息，可以自定义标签的样式以及添加文字说明：

success : function(label){
label.addClass('labelStyle').text('ok');
},

1
2
3

labelStyle

为自己定义的样式类。

3.4 高亮显示有错误的元素

当我们在提交时，如果表单中有的输入框填写错误，需要高亮显示出来错误的位置，这时需要用到高亮显示：

highlight : function(element,errorClass){
$(element).css('border','3px solid red');
},

1
2
3
当输入成功时，需要取消高亮显示的错误，需要用到

unhighlight

：

unhighlight : function(element,errorClass){
$(element).css('border','1px solid green');
}

1
2
3
另外，Validate()还有一些其他的属性和方法，比如表单提交时获取信息：invalidHandler，获取错误提示：showErrors等。

4. remote异步验证

remote:url，可以对表单进行 ajax 验证，默认会提交当前验证的值到远程地址。例如我们在注册时，需要通过后台服务器验证该账号是否被注册，这时就需要用到ajax，其具体使用方法可参照下面：

rules : {
user : {
required : true,
rangelength:[3,5],
remote : 'user.php',
}
},

messages : {
user : {
required : '帐号不得为空！',
rangelength : '帐号长度需要在 {0}-{1} 位之间！',
remote : '账号被占用',
},
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

user.php

为后台验证程序，只是为了简单的验证，我们只设置一个user值，对应php代码如下：

<?php
if ($_GET['user']=="sean") {
echo 'false';
}else{
echo 'true';
}
?>

1
2
3
4
5
6
7
当输入的账号为“sean”时，就会提示账号被占用。加入在登录的时候，我们要同时验证账号跟密码，需要传送多个数据，这时就需要用到data选项

<!--HTML代码-->
<form id="reg" action="123.html">
<p>账号：<input type="text" name="user" id="user" value="" /></p>
<p>密码：<input type="text" name="password" value="" /></p>
<input type="submit" value="提交" />
</form>

//JS代码
$(function(){

$('#reg').validate({
rules : {
user : {
required : true,
rangelength:[3,5],
},
password : {
required : true,
minlength: 6,
remote : {
url : 'user.php',
type :'GET',
data:{
user: function(){
return $('#user').val();
},
}
},
},
},

messages : {
user : {
required : '帐号不得为空！',
rangelength : '帐号长度需要在 {0}-{1} 位之间！',
remote : '账号被占用',
},
password : {
required : '密码不得为空',
minlength: '密码长度不得小于6位数',
remote : '账号或者密码错误',
},
},

});
});

//后台PHP代码
<?php
if ($_GET['user']=="sean" && $_GET['password']=="123456") {
echo 'true';
}else{
echo 'false';
}
?>