JSF 的客户端验证框架

   如果用过Struts框架的朋友们可能会觉得Struts框架的验证设计的非常精致，因为它可以针对每一个ActionForm的字段进行验证。可是在标准JSF框架提供的验证就显得有些片

面了，使得开发JSF应用程序需要做更多的工作。那么接下来，我将为大家介绍一组非常方便的JSF扩展组件，这一组组件是专门用来做验证框架的。下面我们将通过以下几个主题

来了解这组框架的使用过程：

 1 clientvalidators扩展框架的验证流程

 2 clientvalidators扩展框架的使用步骤

 3 clientvalidators框架的使用说明

clientvalidators扩展框架的验证流程

    JSF框架和Struts框架一个很重要的不同在于，JSF采用了以视图组件为中心的MVC设计模式，每次提交页面的时候会把视图组件的状态传递到服务器，因此其验证也就不会像

Struts那样验证JavaBean(ActionForm Bean)了，而是验证输入视图组件的状态。那么clientvalidators又是如何处理的呢？它如其名，它是采用客户端的脚本来验证的，因此它会

生成客户端的Javascript脚本。在clientvalidators使用提供的标签后，会在客户端生成如下脚本:

<SCRIPT language="JavaScript" SRC="validatorResource.jsf?name=clientvalidators&type=js"></SCRIPT>

<SCRIPT language="javascript">

function validate() {

var vs = new Object();

vs.popup = true;

vs.summary = '';

var isFormValid=true;

clearValidationSummary(vs);

retVal=validateRequiredField('form1:txtName','form1:_id0',false,'dynamic');

addErrorToSummaryIfNecessary(retVal,'form1:_id0',vs);

isFormValid=isFormValid && retVal;

showPopupIfNecessary(vs);

return isFormValid;

}

</SCRIPT>

     通过如下脚本，我们可以看见这一validatorResource.jsf?name=clientvalidators&type=js段代码，这段代码用来返回clientvalidators提供的六种验证规则的客户端脚本

。而下面的一段脚本则是提供了用于提交时候的验证的validate()调用接口。这个调用接口主要执行了两个操作，一个是执行验证逻辑，另一个是打印验证结果。

clientvalidators扩展框架的使用步骤

     我们先到http://sourceforge.net/project/showfiles.php?group_id=137466&package_id=188253&release_id=421432 这个地址下载clientvalidators扩展框架。

     接下来我们了解一下如何通过clientvalidators来开发应用程序。我们知道JSF是通过标签来开发用户接口和界面逻辑的，因此clientvalidators也提供了六个标签完成应用

的。另外由于在客户端要请求脚本，所以需要web提供监听器来完成这个执行过程。那么我们的开发步骤如下：

 1 在web.xml中加入：

 <listener>

  <listener-class>

   com.sun.faces.config.ConfigureListener

  </listener-class>

 </listener>

 2 提供资源文件

   2.1 在faces-config.xml中提供资源文件，例如：

   <application>

  <message-bundle>ApplicationMessages</message-bundle>

  <locale-config>

   <default-locale>zh</default-locale>

  </locale-config>

   </application>

   2.2 在classes中加入资源文件，其中资源键包括：

   CV_REQUIRED_FIELD_VALIDATOR_ERROR = Value is required #必须输入的验证异常消息

   CV_COMPARE_VALIDATOR_ERROR = Value comparison failed #比较输入的验证异常消息

   CV_RANGE_VALIDATOR_ERROR = Range validation failed #指定输入范围的验证异常消息

   CV_REGULAR_EXPRESSION_VALIDATOR_ERROR = Reqular expression validation failed #正则表达式的验证异常消息

   CV_LENGTH_VALIDATOR_ERROR = Length validation failed #输入长度的验证异常消息

 3 在jsp页面中调入标签库

 <%@ taglib

  uri="http://sourceforge.net/projects/jsf-comp/clientvalidators"

  prefix="cv"%>

 4 在jsp页面使用 标签。

     下面我们来看一个例子，这个例子中我们要求用户输入一个名字，这个名字是必须输入。

  <f:view>

   <h:form id="form1">

    <h:inputText id="txtName" value="#{ValidatorForm.name}" />

    <cv:requiredFieldValidator componentToValidate="txtName"

     display="dynamic" />

    <h:commandButton value="Save" οnclick="return validate();" action="#{ValidatorForm.evt_Save}"/>

     reRender="outmsg" />

    <cv:scriptGenerator form="form1" popup="true" />

   </h:form>

   <h:outputText id="outmsg" value="#{ValidatorForm.outmsg}" />

  </f:view>

    在这个例子中，cv作为前缀的标签，就是clientvalidators扩展框架提供的标签。<cv:requiredFieldValidator>标签表示必须输入的验证，componentToValidate属性表示要

验证的输入组件的id，display表示要用那种形式的样式的<div>输出，只要有两种static和dynamic。<cv:scriptGenerator> 标签用来生客户段验证脚本，form属性表示那个form

要验证，popup表示是否弹出验证错误消息对话框。

注：在richjsf中<a4j:commandButton>标签也是使用客户端代码的，所以在onclick事件中要注意执行流程的控制。以下是我建议的一种验证事件写法：

    <a4j:commandButton value="Hello" οnclick="if(!validate())return" action="#{ValidatorForm.evt_Save}" reRender="outmsg" />

clientvalidators框架的使用说明

    <cv:requiredFieldValidator>表示必须输入的验证

    <cv:rangeValidator>表示指定范围的验证，minValue，maxValue属性分别表示最小和最大值的范围

    <cv:compareValidator>表示比较输入的验证，componentToCompare属性表示要比较的输入组件的id，operator属性表示比较操作主要有eq和not

    <cv:regularExpressionValidator>表示正则表达式的验证，pattern属性用来输入正则表达式

    <cv:lengthValidator>表示长度验证，min和max属性表示最小和最大长度的值

    <cv:customValidator>表示用户自定义验证方法，function表示用户自定义的脚本函数，params指定要验证的输入组件的客户端id，errorMessage表示输入错误的提示信息

参考文档：

   clientvalidators官方文档：  http://jsf-comp.sourceforge.net/components/clientvalidators/index.html