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的客户端校验标记,做的比较粗糙,重在抛砖引玉.

评论

19 楼 sharp_lover 2009-02-21  

struts的校验确实是比较费劲，jquery很强但是也有一些bug有一次开发中就遇见过。

18 楼 daquan198163 2009-02-20  

commons-validator支持客户端、服务端双重验证，而且统一在一个xml配置即可

17 楼 chinaway 2009-02-20  

按照楼主的配置，终于搞定。3q

16 楼 yyjn12 2009-01-21  

不论如何，客户端的js校验，可以完全取代服务器端的数据检验吗？
个人还是觉得不可以。
毕竟js是执行于客户端的browser，很可能被有意或是无意的饶过了。
只有在服务器上确保数据的正确性，才能给数据以最大程度的保证。

不过这是题外话了。
楼主的文章还是很有价值。

15 楼 aishangtao 2009-01-21  

支持楼方的观点。

14 楼 flyingcai 2008-11-24  

JQUERY应该不错,SPRINGSIDE也用这个.

13 楼 haha_2005 2008-11-21  

强烈同意，刚接触Struts2，没有想到Struts2的验证做的如此烂

12 楼 biaoming 2008-10-16  

怎么配置和使用,能给个例子吗?

11 楼 hotdog 2008-08-19  

客户端和服务端配合验证的方案有吗？

10 楼 kjj 2008-08-16  

只用js验证很不保险，服务端验证不可少

9 楼 happy002 2008-08-15  

jquery 比较耗资源~

8 楼 luckaway 2008-07-22  

long_jianxiu 写道

不晓得有没有完整的代码，我现在弄的一头雾水的，不知道jquery的验证能不能与struts2标签结合。

跟标签有什么关系，标签在客户端生成的还不是HTMl！

7 楼 pyczh 2008-07-21  

struts1和struts2的验证框架都没有用过，一直都是写js验证，呵呵
看来有必要了解一下jquery……

6 楼 niva 2008-07-20  

可以客户端和服务器同时校验么？

5 楼 long_jianxiu 2008-07-02  

不晓得有没有完整的代码，我现在弄的一头雾水的，不知道jquery的验证能不能与struts2标签结合。

4 楼 stworthy 2008-06-10  

jquery-validate的rules和messages分开写，如能合在一起写又将如何？

3 楼 spiritfrog 2008-06-10  

看着不错， 本来就很烦struts的validator

2 楼 zl5897 2008-05-24  

<p>是啊，现实开发中，总是很难直接套用strut2自带的那几个模板来实现验证，而且不可以插入自定义脚本。为此我在开发过程中也自定义了一套模板。<br/><br/>ps：struts2的验证框架其实挺耗资源的，在我们做压力测试中，把其他性能瓶颈解除后，发现很多线程都堵在创建Validator对象这个地方。</p>
<pre name='code' class='java'>    public synchronized List&lt;Validator&gt; getValidators(Class clazz, String context, String method) {
        final String validatorKey = buildValidatorKey(clazz, context);

        if (validatorCache.containsKey(validatorKey)) {
            if (FileManager.isReloadingConfigs()) {
                validatorCache.put(validatorKey, buildValidatorConfigs(clazz, context, true, null));
            }
        } else {
            validatorCache.put(validatorKey, buildValidatorConfigs(clazz, context, false, null));
        }

        // get the set of validator configs
        List&lt;ValidatorConfig&gt; cfgs = validatorCache.get(validatorKey);

        // create clean instances of the validators for the caller's use
        ArrayList&lt;Validator&gt; validators = new ArrayList&lt;Validator&gt;(cfgs.size());
        for (ValidatorConfig cfg : cfgs) {
            if (method == null || method.equals(cfg.getParams().get("methodName"))) {
                // Remove methodName temporary
                Object methodName = cfg.getParams().remove("methodName");
                Validator validator = ValidatorFactory.getValidator(cfg, ObjectFactory.getObjectFactory());
                // Readd methodName temporary
                cfg.getParams().put("methodName", methodName);
                validator.setValidatorType(cfg.getType());
                validators.add(validator);
            }
        }

        return validators;
    }</pre>
 
<p>在整个方法上加锁，多线程并发下，有影响。</p>

1 楼 wangyazhen 2008-05-24  

支持你的观点，感觉还是jquery表现力好点