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