前端验证框架：JQuery插件之JQuery Validate
写一个表单，就会进行一次数据验证。聪明的人把这些繁琐重复的工作提取出来，形成插件。恰好JQuery如此好用，于是就有了JQuery Validate插件。
插件一般特质是：简洁和可拓展性，JQuery Validate非常好的证明了这一点。
准备工作：
需要在头部引入jquery（我使用1.9版本）和JQuery Validate插件。
JQuery Validate插件下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation/。
抽取出两个文件：jquery.validate.min.js和messages_bs_zh.js（中文提示信息）。
在使用前，需要为表单注册（最好写在$(function(){ ... })中）：
$("#loginForm").validate();
这样就可以在id为loginForm的表单中使用数据验证功能了。
简洁：
<input type="text" class="required email" id="input_e">
只需要在class上加入两个名词，就表示这个表单时必须填写和必须符合email规则的，如果不符合规则，会出现提示信息。
关于如何使用这些字段，最好的方法是查看messages_bs_zh.js：
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
那么例如maxlength的属性该如何定义呢？
<input type="text" class="required email" id="input_e" maxlength="10">
定义范围：
<input type="text" class="required email" id="input_e" rangelength="5,10">
如何使用equalTo：
<input type="password" class="input-xlarge required" id="input_p" name="password"> <input type="password" class="input-xlarge required" equalTo="#input_p" id="input_pt">
其他属性自行参考使用。
远程验证：
$("#loginForm").validate({
rules:{
name:{
remote:"${ctx}/portal/validateName"
/*
remote: {
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据，默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}
*/
}
},
messages:{
name:{
remote:"用户名已存在"
}
}
});
rules属性中可以进行自定义规则。我定义的规则是：name="name"的表单使用remote进行远程验证，也就是使用Ajax去服务端走一趟。发送的参数是name的值，收到的数据只能是true或者false，被注释的部分是完整写法（我使用的是简单写法）。我这里的服务端使用Spring MVC框架，代码：
@RequestMapping(value="/validateName") @ResponseBody public String validateName(RequestParam String name){ if(name.equals("abcdefg")){ return "true"; } return "false"; }
同时看到下面有message属性，定义了name的remote错误提示。
扩展：
/** * 自定义验证规则——用户名验证 */ $.validator.addMethod( "vname", // name验证方法名 function(value, element) // 验证规则 { var req = /^[\u4E00-\u9FA5a-zA-Z][\w\u4e00-\u9fa5]*/; if(req.test(value)){ return true; }else{ return false; } }, "用户名只能是汉字、字母、数字和下划线组合,必须以字母或汉字开始" // 默认验证消息（自定义规则信息的国际化好像不起作用？） );
扩展非常简单，参考注释理解。使用：
<input type="text" class="vname" id="input01" name="name">
注意、改动：
1、错误信息默认用label元素包裹起来，label的class为error，必须自己定义error的样式：label.error{ ... }
2、label会换行显示错误信息，如果感觉不爽，可以修改validator.defaults中的errorElement属性：$("#loginForm").validate({default:{errorElement:"span"}});如果改动，需要定义span.error{}样式
3、验证的进行默认在submit的时候进行，如果希望获得焦点、进行输入的时候就进行验证，需要修改两个属性值：$("#loginForm").validate({focusCleanup:true,onkeyup:true,});
4、在网上看到有人这样写：class="{required:true,maxlengt:12}"。使用到了jquery.metadata.js。但是经过我实验，好像两个插件并不能很好的整合。
多一句：
在研究这个插件的时候，从官方文档上看到一个有趣的示例。又发现了一个好玩的东西：jquery.maskedinput.js。可以自行搜索资料研究。
