JSP的前台验证方式

JSP的前台验证方式

要为学校的网站开发做一个统一的开发框架，目前只是使用Struts2和iBATIS搭起了大概的框架，有很多细节还没有考虑，也有很多地方需要优化。首先从前后台验证方面入手。

本文所说的前后台验证，不是按照验证发生的位置来区分的，而是按照验证过程是否与后台数据交互来区分的。比如，对于用于输入的内容，进行非空、长度、正则等验证，都属于前台验证，而判断用户注册的新名称是否存在，就属于后台验证。

首先第一部分是前台验证。我个人认为，前台验证有以下三种方式：

1.普通的JS验证

1) 使用方法：

在JSP页面或者JS文件里，编写js代码，进行判断。比如

2) 错误信息显示：

1 function validateBeforeAdd *** (){
2 var name = document.getElementById( ' username ' ).value.trim();
3 if (name == "" ){
4 alert( " 请填写用户名. " );
5 document.getElementById( ' 某个div的id ' ).innerHTML =**** ;
6 }
7 }

一般都是使用alert()来显示，或者在一个div中显示。如上面的代码所示。

3) 优缺点：优点是不经过后台，完全是前台进行判断，速度比较快。缺点是代码量比较大，要写很多的if语句。

2. Struts2提供的验证功能

1) 使用方法：

编写对应的actionName-validation.xml文件，并在对应的<action />中增加<result name="input">***</result>。其中，actionName是需要验证的Action的名字，而这个xml要和Action类放在同一个文件夹下。以下是AdminAction-validation.xml代码片段：

1 < validators >
2 < field name ="username" >
3 < field-validator type ="requiredstring" >
4 < param name ="trim" > true </ param >
5 < message > 请输入用户名 </ message >
6 </ field-validator >
7 < field-validator type ="stringlength" >
8 < param name ="maxLength" > 10 </ param >
9 < message > 用户名不能超过10个字符 </ message >
10 </ field-validator >
11 </ field >
12   </ validators >

 在对应的<action />中增加名为input的结果：

1 < action name ="login" class ="com.action.AdminAction" method ="login" >
2 < result > main.jsp </ result >
3 < result name ="error" > login.jsp </ result >
4 < result name ="input" > login.jsp </ result >
5   </ action >

    如果是这样来配置的话，AdminAction中所有的方法都会首先进行同样的验证，判断username是否已经填写，是否超过10个字符。如果AdminAction中的foo()不应该进行验证，可以在foo()方法前面，用@SkipValidation来跳过验证。如果这个Action中，各个方法要进行不同验证的话，可以为每个方法配置一个验证用的xml, 它的命名规则是actionName-functionName-validation.xml。

2) 错误信息显示：

在input指向的物理视图里，要有至少一个<s:fielderror />来显示错误信息。但是默认的<s:fielderror/>显示格式是<ui></ui>的，每条错误信息不但会换行，而且前面还有一个恶心的大黑点儿。这是可以改变的，但是不属于本文范围。

3) 优缺点：Struts2提供的前台验证功能，不需要编写大量代码，但是需要配置验证规则。要特别注意短路验证以及验证的顺序问题。Struts2的前台验证的错误信息返回到页面时，需要刷新一下页面。这牵扯到数据回显问题。用Struts2自带的标签库的话，给用户的感觉会更好一些，假如不使用Struts2的标签，我都怀疑它不能回显已经填好的数据。

3. JavaScript库，JavaScript UI框架

1) 使用方法：使用ExtJS等框架。ExtJS的各种表单组件，功能很强大，自身就有非空验证，长度验证，正则表达式验证。其代码如下：

{
fieldLabel: ' First Name ' ,
name: ' first ' ,
allowBlank: false ,
blankText: ' First name is required. ' ,
maxLength: 10 ,
minLength: 2
}

当然，这种JS库提供了非常方便的Ajax提交方式，但是前台验证最好还是不要跑到后台的范围里去。

2) 错误信息显示：ExtJS提供了非常好的错误信息显示方式，如下图所示：

这种显示不需要开发人员编写额外的代码。

3) 优缺点：ExtJS的确是很强大的js框架，使用它，前台验证变得很方便，错误信息的显示也很好看。但是，ExtJS的速度似乎有点慢，可能和我用的js版本有关。我用的是debug版的，不是发布版的。另外，我不喜欢ExtJS的书写格式，和HTML或者XML语言差别太大，完全是JSON格式的。因为功能很强大，所以对它进行扩展或者修改，并不容易。以上对于ExtJS的正面以及反面的言论，完全是本人的想法，请勿轻信。

 

 

posted on 2010-11-22 17:06 月光疾风 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/yuepeng/archive/2010/11/22/1884009.html