struts2实践- 结合jquery的纯客户端js表单校验

折腾了几天struts2框架,发现其对校验的支持不是很好,主要体现在如下几点
1.灵活性差
只有theme为xhtml和css_xhtml的时才能够启用纯客户端的js验证.
一般用户对页面UI表示都有一定的要求,当theme为xhtml或css_xhtml的时候会导致页面的排版和用户的UI要求不一致,而且几乎无法解决该问题.并且struts2纯js客户端的错误信息是利用动态添加一个tr来显示的.这就导致如果我想把错误和表单显示在同一行,利用struts2的客户端验证就很难做到.
2.默认支持的校验类型比较少.
struts2默认只支持比较少的几种验证类型例如
* required validator
* requiredstring validator
* stringlength validator
* regex validator
* email validator
* url validator
* int validator
* double validator
date和表达式验证都不支持.这给使用造成了一定的麻烦.
3.不支持客户端定制的js验证.
针对如上几点郁闷的地方,我在网上寻找了很久终于发现了一个比较好js客户端验证的框架
jquery-validate
该验证框架基于jquery这个js框架,利用jquery特性实现客户端的js校验,主要特点如下
1.支持基于表单类似声明式的js验证详细例子如下

$("#signupForm").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			},
			password: {
				required: true,
				minLength: 5
			},
			confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
			email: {
				required: true,
				email: true
			},
			topic: {
				required: "#newsletter:checked",
				minLength: 2
			},
			agree: "required"
		},
		messages: {
			firstname: "Please enter your firstname",
			lastname: "Please enter your lastname",
			username: {
				required: "Please enter a username",
				minLength: "Your username must consist of at least 2 characters"
			},
			password: {
				required: "Please provide a password",
				minLength: "Your password must be at least 5 characters long"
			},
			confirm_password: {
				required: "Please provide a password",
				minLength: "Your password must be at least 5 characters long",
				equalTo: "Please enter the same password as above"
			},
			email: "Please enter a valid email address",
			agree: "Please accept our policy"
		}
	});

2.内置多种基本校验的类型(包括与ajax结合的服务器断校验)
required,remote(ajax服务器端校验器),minlength,maxlength,rangelength,min,
max,range,email,url,date,,dateISO,dateDE,number,numberDE,digits,creditcard
,accept,equalTo
3.支持自定义校验类型.
可以通过
$.validator.addMethod("phone", function(value) {
return validatePhone(value);
}, 'Please enter correct format for referee phone!');
添加自己的校验器
4.支持多种校验器的声明方式.
1).利用函数声明
请参考1点
2).结合控件属性声明
<input  type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
3).结合控件的class属性声明
<textarea id="ccomment" name="comment" class="required">
这几种声明方式可以按照实际需要结合使用大大提高了灵活性.

附件是我利用struts2框架自己的form标签扩展的一个form标记的ftl模板,主要用于生成基于jquery的客户端校验标记,做的比较粗糙,重在抛砖引玉.