表单验证插件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）控件属性方式

<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>

这种方法直接在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代码如下：

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

当输入的账号为“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代码<?phpif ($_GET['user']=="sean" && $_GET['password']=="123456") {    echo 'true';}else{    echo 'false';}?>