[转]jQuery插件之: Validation表单验证插件
转载自: http://www.iteye.com/topic/557512
一、validate是jQuery的一个表单验证插件，它不仅实现了客户端表单的多种验证规则，而且，还是用ajax实现了服务器端远程验证。它内置有多种验证规则，同时，可以很方便的定义自己的规则。在此，说明一些常用的功能，详细的介绍，可以参考官方文档。http://docs.jquery.com/Plugins/Validation
validation插件使用很简单：
1 $("#formId").validate(
2 {
3 // 验证规则
4 rules:
5 {},
6 // 验证提示信息（失败时）
7 message:{},
8 errorElement: 'span', // 放置错误信息的元素，可以是其他的。
9 errorPlacement: function(error,element) // 将错误提示信息放在什么地方
10 {},
11 // 成功时执行
12 success: function(label)
13 {
14 label.text(" ") // 将错误内容清空，一定要是" "有空格，否则IE有问题。
15 .addClass("success");
16
17 }
18 });
其中"formId"是表单的form元素的ID属性。
rules和message分别都对应一个对象，该对象只包含属性，其中，属性名为表单中input的name（包括select的name)，值为要应用的规则对象。如：
1 rules:{
2 userName:{
3 required:true,
4 maxlength:20,
5 emote: {
6 url: "ajax/validateUserName.action", //后台处理程序
7 type: "post", //数据发送方式
8 dataType: "json", //接受数据格式
9 data: { //要传递的数据，默认已传递应用此规则的表单项
10 email: function() {
11 return $("#email").val();
12 }
13 }
14 }
15 }
message对应是一样的，只是把规则的值改为提示信息，如：required:‘必填项'。
validation内置的验证规则如下：
required:true 必填
minlength:最小长度
maxlength:最大长度
rangelength: [3,10] 长度介于 3 和 {1} 之间的字符串
range:[100,1000] 只能是100和 1000 之间的值”
min:最小值
max:最大值
email:true 验证邮箱
url:true 验证是否是合法的网址
date:true 验证是否是合法的日期 new Date() 类型格式
dateISO:true 验证是否是合法的日期 年/月/日 或 年-月-日 格式
number:true 验证是否是合法的数字
digits:true 验证是否为整数
creditcard: 验证合法的信用卡号
equalTo:”要匹配的元素” 如:’#cnfpass’ , 验证两次输入值是否相同
accept: “gif|png|jpg” 验证是否是合法后缀名的字符串
1 remote: {
2 url: "ajax/validateUserName.action", //后台处理程序
3 type: "post", //数据发送方式
4 dataType: "json", //接受数据格式
5 data: { //要传递的数据，默认已传递应用此规则的表单项
6 email: function() {
7 return $("#email").val();
8 }
9 }
注意：remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。
除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod方法实现的，语法为：jQuery.validator.addMethod("name",function,message)。其中name为验证规则的名称，function定义验证的规则，message是验证失败时的提示信息。如：
1 jQuery.validator.addMethod("ip", function(value, element) {
2 return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
3 }, "Please enter a valid ip address.");
4 // 增加只能是字母和数字的验证
5 jQuery.validator.addMethod("chrnum", function(value, element) {
6 return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
7 }, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");
8 /**
9 * 自定义验证规则——对电话号码进行验证
10 */
11 $.validator.addMethod(
12 "isPhone",
13 function(value, element)
14 {
15 // “/\(?0\d{2,3}[) -]?\d{7,8}/”匹配电话号码的格式多种：010-82839278、(010)82839278、01082839278等，但是，这样有一个问题
16 // 如：(01082839278这样的也会匹配。当然可以用分支条件"|"解决，比较麻烦。而且以什么开始或结束也没有匹配。
17 // 为了简单起见，去掉有"()"的形式。匹配区号3位，则本地号8位，区号4位，则本地号7位的号码。
18 var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;
19 return this.optional(element) || (tel.test(value));
20 }
21 , "电话号码格式不对."
22 );
还可以定义其他的验证规则。应用自定义的规则很容易，自定义规则和内置规则用法是一样的。
在此，提供一个有用的验证规则，那就是针对select下拉框的验证：
1 /**
2 * 自定义验证规则——增加对select的验证
3 */
4 $.validator.addMethod(
5 "selectNone", // name验证方法名
6 function(value, element) // 验证规则
7 {
8 if (value == "none") // select默认值需要设置为"none"(当然可以自定义其他值）
9 {
10 return false;
11 }
12 else
13 {
14 return true;
15 }
16 },
17 "必须选择一项" // 默认验证消息（自定义规则信息的国际化是否不起作用？）
18 );
二、验证信息的国际化
验证信息国际化是很方便的，默认验证信息是英文的，只需导入validation已写好的国际化文件，如：
1 <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>
2
3 <script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>
在验证时，去掉message，提示信息就会变成中文。
可以改国际化文件中的提示信息内容，使其更加个性化、符合项目要求。另外，如果在验证时使用了message，message中指定的字段提示信息会覆盖国际化文件中的信息。
这里有一个问题，国际化时似乎没法根据浏览器的locale来自动识别该用什么语言来显示。笔者测试了一下，当导入多国语言文件时，总是会使用最后一次导入的语言。因此，要实现真正的国际化，可以通过一个链接之类的来选择语言，然后用javascript来导入不同的语言文件。
三、远程验证
远程验证很有用，用户体验很好，因为不需要提交表单就知道自己注册用户的是否已被注册。validation插件通过remote规则来实现验证。在此讲解一下如果将请求提交给struts2的action来验证。
remote规则的格式为：
1 remote: {
2 url: "ajax/validateUserName.action", //后台处理程序
3 type: "post", //数据发送方式
4 dataType: "json", //接受数据格式
5 data: { //要传递的数据，默认已传递应用此规则的表单项
6 email: function() {
7 return $("#email").val();
8 }
9
10 }
由于remote规则只允许后台返回true或false，因此struts2的action得不同于一般的action，不能返回一个字符串，然后dispatch一个视图之类的。研究之后，发现struts2中有一种result类型：stream，通过该类型可以实现返回true或false。action代码如下：
1 view plaincopy to clipboardprint?
2 // 定义返回的输入流
3 private InputStream inputStream;
4
5 // 定义需要到远程验证的字段
6 private String userName;
7 private String email;
8
9 // 定义返回值：只能为Boolean类型
10 private Boolean valid;
11
12 /**
13 * Action执行的方法：实现远程验证，将业务逻辑交给后台处理，并接收结果
14 * 同时，将结果返回。
15 * @return
16 */
17 public String execute()
18 {
19 // 根据userName判断该SP/CP是否已被注册;根据email判断该账号是否已被占用
20 if(spcpPreApprovalService.existSpcpAccount(userName, email))
21 {
22 valid = false;
23 }
24 else
25 {
26 valid = true;
27 }
28
29 inputStream = new ByteArrayInputStream(valid.toString().getBytes());
30
31 return Action.SUCCESS;
32 }
33 // 省略getter、setter
struts.xml文件的配置为：
1 <package name="ajax" namespace="/ajax" extends="struts-default">
2 <action name="validateSpId" class="validateSpcpAction">
3 <result type="stream">
4 <param name="contentType">text/html</param><!-- 默认为text/plain -->
5 <param name="inputName">inputStream</param><!-- 默认就为inputStream -->
6 </result>
7 </action>
8 </package>
这样便可以实现远程验证功能。
总结
可以看出validation使表单验证变得很容易，实现起来很轻松。validation插件还有其他一些功能，需要了解可以查看官方文档。
浙公网安备 33010602011771号