zoukankan      html  css  js  c++  java
  • 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的正面以及反面的言论,完全是本人的想法,请勿轻信。

  • 相关阅读:
    线段树专辑—— pku 1436 Horizontally Visible Segments
    线段树专辑——pku 3667 Hotel
    线段树专辑——hdu 1540 Tunnel Warfare
    线段树专辑—— hdu 1828 Picture
    线段树专辑—— hdu 1542 Atlantis
    线段树专辑 —— pku 2482 Stars in Your Window
    线段树专辑 —— pku 3225 Help with Intervals
    线段树专辑—— hdu 1255 覆盖的面积
    线段树专辑—— hdu 3016 Man Down
    Ajax跨域访问
  • 原文地址:https://www.cnblogs.com/yuepeng/p/1884009.html
Copyright © 2011-2022 走看看