写一个表单,就会进行一次数据验证。聪明的人把这些繁琐重复的工作提取出来,形成插件。恰好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。可以自行搜索资料研究。