在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);就大功告成了。
(如需转载请署名出处)