JSP的前台验证方式
2016-02-17 00:00
573 查看
1.普通的JS验证
1) 使用方法:
在JSP页面或者JS文件里,编写js代码,进行判断。比如
2) 错误信息显示:
一般都是使用alert()来显示,或者在一个div中显示。如上面的代码所示。
3) 优缺点:优点是不经过后台,完全是前台进行判断,速度比较快。缺点是代码量比较大,要写很多的if语句。
2. Struts2提供的验证功能
1) 使用方法:
编写对应的actionName-validation.xml文件,并在对应的<action />中增加<result name="input">***</result>。其中,actionName是需要验证的Action的名字,而这个xml要和Action类放在同一个文件夹下。以下是AdminAction-validation.xml代码片段:
在对应的<action />中增加名为input的结果:
如果是这样来配置的话,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的各种表单组件,功能很强大,自身就有非空验证,长度验证,正则表达式验证。其代码如下:
当然,这种JS库提供了非常方便的Ajax提交方式,但是前台验证最好还是不要跑到后台的范围里去。
2) 错误信息显示:ExtJS提供了非常好的错误信息显示方式,如下图所示:
这种显示不需要开发人员编写额外的代码。
3) 优缺点:ExtJS的确是很强大的js框架,使用它,前台验证变得很方便,错误信息的显示也很好看。但是,ExtJS的速度似乎有点慢,可能和我用的js版本有关。我用的是debug版的,不是发布版的。另外,我不喜欢ExtJS的书写格式,和HTML或者XML语言差别太大,完全是JSON格式的。因为功能很强大,所以对它进行扩展或者修改,并不容易。以上对于ExtJS的正面以及反面的言论,完全是本人的想法,请勿轻信。
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的正面以及反面的言论,完全是本人的想法,请勿轻信。
相关文章推荐
- ajaxSubmit提交后,success中返回的data转换json失败
- EditPlus中HTML与CSS与JavaScript自动补齐文件
- JavaScript高级程序设计学习笔记 02
- 关于fastclick.js
- JSON的key值为数字时如何使用
- BZOJ 1031 JSOI 2007 字符串加密 Cipher 后缀数组
- 三个js循环的关键字示例(for与while)
- cors跨域资源共享】同源策略和jsonp
- js截取相应的域名----正则匹配法 和校验Url 正则表达式
- jsoup 解析HTML信息
- jsoup 解析HTML信息
- jsoup 解析HTML信息
- js实现简单导航切换
- 理解JSP
- "0" != 0
- Javascript自学-2
- 能说明你的Javascript技术很烂的五个原因
- JavaScript中的消息框的分类
- BAT及各大互联网公司2014前端笔试面试题:JavaScript篇
- JavaScript中的数据类型