在Struts中大家可能对其页面有效性检查(校验)有比较深刻的印象,你只要在structs-config.xml中增加一个plugin的配置,然后定义一个检验配置的xml,然后在稍微改变一些代码,就可以自动完成页面的检验了。具体步骤如下:
第一步:建立校验配置文件validation.xml,咱们以登陆页面为例,该文件如下:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!--
    Validation Rules for the Struts Example Web Application

    $Id: validation.xml,v 1.1.1.1 2003/05/15 06:28:29 xiaogen Exp $
-->

<form-validation>
    <!-- ========== Default Language Form Definitions ===================== -->
    <formset>
        <form name="loginForm">
            <field property="username"
                    depends="required,minlength,maxlength">
                <arg0   key="login.username"/>
                <arg1   key="${var:minlength}" name="minlength" resource="false"/>
                <arg1   key="${var:maxlength}" name="maxlength" resource="false"/>
                <var>
                    <var-name>maxlength</var-name>
                    <var-value>16</var-value>
                </var>
                <var>
                    <var-name>minlength</var-name>
                    <var-value>3</var-value>
                </var>
            </field>
            <field property="passwd"
                    depends="required,minlength,maxlength">
                <arg0   key="login.passwd"/>
                <arg1   key="${var:minlength}" name="minlength"
                   resource="false"/>
                <arg1   key="${var:maxlength}" name="maxlength"
                   resource="false"/>
                <var>
                    <var-name>maxlength</var-name>
                    <var-value>16</var-value>
                </var>
                <var>
                    <var-name>minlength</var-name>
                    <var-value>6</var-value>
                </var>
            </field>
        </form>
     </formset>
</form-validation>
我向大家一看就能明白这个配置文件的含义,我们的JSP页面的名称叫loginForm, 这个登陆页面有两个字段,一个是用户名username,一个是密码passwd.在这里这两个字段都有三个约束,required,minlength,maxlength, 分别表示这两个字段需要用户输入,最小长度,最大长度。针对用户名,必须是从3到16个字符(包括3和16),而密码必须是不能少于6个字符,而且不能多于16个字符。

如果你需要增加其他form得校验配置,可以在formset中增加相应的form配置。

第二步:修改struts-config.xml文件,增加如下代码:
<plug-in className="org.apache.struts.validator.ValidatorPlugIn">
    <set-property property="pathnames" value="/WEB-INF/config/validator-rules.xml,/WEB-INF/config/validation.xml" />
  </plug-in>
这里校验规则文件是:validator-rules.xml

第三步:修改页面文件
在页面增加以下代码,告诉struts这个页面中要增加针对哪个form的配置的javascript页面校验代码:
<html:javascript formName="loginForm" />
然后在要校验的form中的onsubmit事件中增加return validateLoginForm(this);来进行校验,就像下面的代码:
<html:form method="post"
       action="/login.do"
       focus="username"
       onsubmit="return validateLoginForm(this);">

通过这三步你就可以直接使用定义好的一些页面校验功能,当然这是客户端校验,你也可以使用服务

段的后台校验。

当然如果在你的web程序中,你没有采用struts,或者你使用的是asp,asp.net什么的,你也想使用这么方便通用的页面校验功能,那怎么办呢?

其实,很简单,你只要把
validator-rules.xml中定义的规则拿出来,然后定义一个javascript的类,就可以达到这个目的了。下面我就列出这个类的一部分:
function validation(form)
{
    //------variable deifinition start---------------------------------------
    var form=form;
    var arrRequired=null;
    var arrMinLength=null;
    var arrMaxLength=null;
    var arrEmail=null;
    var arrMask=null;
    var arrDateValidation=null;
    var arrEqualValidation=null;
 //------variable deifinition end-----------------------------------------
 
 //------check argument start---------------------------------------------
 if(typeof form != "object" )
 {
  alert("The argument of validation must be a valid page form!");
  return;
 }
 //------check argument end-----------------------------------------------
 
 //------inner class definition start-------------------------------------
 function required(fieldname,msg)
 {
  this.fieldname=fieldname;
  this.msg=msg;
 }
this.validate=validate;
this.addRequired=addRequired;
/**
  *  Add field which must input data. The message will be shown to user if the field has no data.
  *  @param  fieldname   field name.
  *  @param  msg         The msg will be shown to user if the field is empty.
  */
 function addRequired(fieldname,msg)
 {
      if(null == arrRequired)
     {
             arrRequired=new Array();
     }
    var tmpLen=arrRequired.length;
    arrRequired[tmpLen]=new required(fieldname,msg);
 }
function validate()
 {
  var isValid=true;
  if(null != arrRequired)
  {
   isValid=isValid && validateRequired(form,arrRequired);
  }
}
}
/**
 * Validate fields in forms¡£
 * @param form           Form will be validated.
 * @param arrRequired    Array of fields which be setted.
 * @return   true or false. Return true if validation is passed,
 *           else return false.
 */
function validateRequired(form,arrRequired)
{
 var isValid = true;
 var focusField = null;
 var i = 0;
 var fields = new Array();
 for (x in arrRequired)
 {
  var field = form[(arrRequired[x]).fieldname];

  if (field.type == 'text' ||
  field.type == 'textarea' ||
  field.type == 'file' ||
  field.type == 'select-one' ||
  field.type == 'radio' ||
  field.type == 'password')
  {

   var value = '';
   // get field's value
   if (field.type == "select-one")
   {
    var si = field.selectedIndex;
    if (si >= 0)
    {
     value = field.options[si].value;
    }
   }
   else
   {
    value = field.value;
   }

   if (trim(value).length == 0)
   {

    if (i == 0)
    {
     focusField = field;
    }
    fields[i++] = (arrRequired[x]).msg;
    isValid = false;
   }
  }
 }
 if (fields.length > 0)
 {
  focusField.focus();
  alert(fields.join('\n'));
 }
 return isValid;
}

这个类的完整文件已经被上传到我的blog中了。

然后在你的页面增加如下脚本就可以达到校验的目的了:
function check(form)
{
    var ovalidation=new validation(form);
   ovalidation.addRequired("username","User name is required!");
   ovalidation.addRequired("passwd","User password is required!");
   return ovalidation.validate();
}

然后在form的onsubmit事件中增加return check(this);就大功告成了。
(如需转载请署名出处)

posted on 2005-03-10 17:30 SNOW NO Track 阅读(645) 评论(0)  编辑  收藏 所属分类: Script

只有注册用户登录后才能发表评论。


网站导航: