表单验证插件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>第二步：在 JS 文件对相应的form调用validate()
$('#reg').validate();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）控件属性方式
这种方法直接在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 : '注意！请输入正确的邮箱格式',
},
}
});
});3. validate()的方法和选项
3.1 jQuery.format 格式化错误提示
当我们根据需求修改默认验证规则时，也需要在提示错误信息时对应的显示，因此就可以用到格式化错误提示，就比如我们修改了上述的账号的长度为3~5：
$(function(){
$('#reg').validate({
rules : {
user : {
required : true,
rangelength:[3,5]
}
},
messages : {
user : {
required : '帐号不得为空！',
rangelength : '帐号长度需要在 {0}-{1} 位之间！', //{}表示对应的第几个数
},
}
});
});3.2 开启调试模式禁止提交
当我们在调试时，只需要检测能否验证，而不需要页面进行跳转时，可以开启调试模式禁止提交
$('#reg').validate({
debug : true,
});如果有多个表单，为了不需要每个表单下都写一遍上述代码，可以在全局环境下设置调试模式
$.validator.setDefaults({
debug : true,
});当我们需要阻止表单提交的时候，还要执行程序，这时就可以设置其他方式代替默认提交
$('#reg').validate({
submitHandler : function(){
// some action
},
});该函数内程序是当验证成功后执行，而且阻止了默认提交，一般用于ajax提交使用。
3.3 设置成功后加载的样式
Validate.js插件内置的验证成功的样式为”valid”，我们可以在CSS样式中自定义valid的样式：
.valid{
background: url(right.png) no-repeat right;
background-size: auto 100%;
border: 2px solid green;
}这样输入的格式如果通过验证，即可显示相应的格式。我在上述样式中设置成如果验证成功，即将input输入框边框设置为绿色并且添加一个绿色小勾，当输入验证通过得到结果为：
当然，也可以修改验证提示消息，可以自定义标签的样式以及添加文字说明：
success : function(label){
label.addClass('labelStyle').text('ok');
},labelStyle为自己定义的样式类。
3.4 高亮显示有错误的元素
当我们在提交时，如果表单中有的输入框填写错误，需要高亮显示出来错误的位置，这时需要用到高亮显示：
highlight : function(element,errorClass){
$(element).css('border','3px solid red');
},当输入成功时，需要取消高亮显示的错误，需要用到unhighlight：
unhighlight : function(element,errorClass){
$(element).css('border','1px solid green');
}另外，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 : '账号被占用',
},
},user.php为后台验证程序，只是为了简单的验证，我们只设置一个user值，对应php代码如下：
if ($_GET['user']=="sean") {
echo 'false';
}else{
echo 'true';
}
?>当输入的账号为“sean”时，就会提示账号被占用。加入在登录的时候，我们要同时验证账号跟密码，需要传送多个数据，这时就需要用到data选项
//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代码
if ($_GET['user']=="sean" && $_GET['password']=="123456") {
echo 'true';
}else{
echo 'false';
}
?>