WebLogic Workshop 驗證用戶輸入

 

驗證用戶輸入

在大多數情況下,當用戶通過表單輸入數據時,我們要確保輸入的值有效,然後才能進行其他操作,例如將數據儲存到數據庫中或用於確定下一步操作。表單驗證經常使用客戶端 JavaScript 來完成。此方法在 WebLogic Workshop 中也適用。此外,服務器端的驗證可在服務器端檢查用戶輸入。後一方法的優點有:

  • 不必依賴對其沒有控制權的瀏覽器功能。
  • 可以使用控制器文件中的其他業務邏輯封裝驗證邏輯。
  • 可以就在受影響表單字段旁的表單中顯示錯誤消息,而無需彈出對話框。

客戶端的驗證

WebLogic Workshop 爲 netui:form 標記及其表單字段提供了許多特性,例如,可以用來調用 JavaScript 的 onClickonBlur。例如,可以有 netui:textBox 標記,用戶在其中輸入他們的年齡:

<netui:textBox dataSource="{actionForm.age}" onBlur="isValidAge()"/>

這是 JavaScript 函數 isValidAge 的示例,該函數在 onBlur 特性中提到:

function isValidAge() {
   if(document.forms[0].elements[1].value <= 0)
       alert('Wrong Age');
}

當用戶輸入值並轉到下一個表單字段後,onBlur 特性會調用 JavaScript 函數 isValidForm,當輸入的年齡認爲無效時,該函數將顯示對話框。

請注意,在示例中是使用 JavaScript formselements 數組訪問表單及其字段的。如果想使用各種字段的正確名稱,需要使用 tagID 特性以及 WebLogic Workshop JavaScript 函數 getNetuiTagName。還需要用 <netui:html> 替換 <html> 標記。重寫上一示例,代碼將如下所示:

<netui:html>
     ...
     
    <netui:textBox tagId="age" dataSource="{actionForm.age}" onBlur="isValidAge();"/>
     ...
</netui:html>

而且這將是 JavaScript 函數 isValidAge

function isValidAge() {
   if(document[getNetuiTagName("myForm")][getNetuiTagName("age")].value <= 0)
       alert('Wrong Age');
}

請注意,我們使用 getNetuiTagName(而不是 elements[1])來引用元素的 tagID。也可以推導出,在整個樣例中,netui:form 標記包含 tagID="myForm"netui:form 標記並沒有實際顯示在上述樣例代碼中)。

這些方法也可以與表單的提交操作一起使用。對於 netui:buttonnetui:imageButton 標記,可以通過標記的 onClick 特性調用 JavaScript 函數,如下例所示:

<netui:button value="submit" onClick="return isValidForm();" />

當用戶單擊按鈕時,如果驗證成功,JavaScript 函數 isValidForm 會檢查表單字段並返回 true。或者,如果不是所有的輸入值都正確,isValidForm 函數顯示帶有錯誤消息的對話框,並返回 false。(此功能的實現並沒有實際顯示在樣例代碼中。)

對於 netui:anchornetui:imageAnchor 標記(兩者的實現依賴於 JavaScript 提交表單),如果驗證成功,JavaScript 驗證函數必須包含其他代碼以設置 JavaScript Form 對象的 methodaction 屬性,並調用其 submit 方法。下列示例(使用與上一示例相同的 tagID 和 JavaScript 函數 isValidForm)說明,當表單驗證成功時如何設置各種屬性並調用 submit 方法:

function submitFromAnchor() {
    document[getNetuiTagName("myForm")].method="POST";
    document[getNetuiTagName("myForm")].action="/ClientSideValidation/thankYou.do";
    if(isValidForm())
        document[getNetuiTagName("myForm")].submit();  
} 

如示例所示,表單的 method 屬性必須設置爲 POST。action 屬性必須設置爲當用戶單擊定位點並提交表單時要調用的操作的全名。此操作名與 Web 應用程序名(後接 JPF 文件中的操作方法名)相對應,後接 DO 擴展名。在示例中,Web 應用程序 ClientSideValidation 的頁面流 JPF 文件包含操作方法 thank You

不使用 getNetuiTagName 也可以編寫相同的函數,如下例所示:

function submitFromAnchor() {
    document.forms[0].method="POST";
    document.forms[0].action="/ClientSideValidation/thankYou.do";
    if(isValidForm())
         document.forms[0].submit();  
}

最後,netui:anchornetui:imageAnchor 標記必須調用 onClick 特性中的 JavaScript 函數並添加“return false;”,如下例所示:

<netui:anchor onClick="submitFromAnchor(); return false;" action="thankYou">Submit</netui:anchor> 

如果沒有添加表達式“return false;”,將始終提交表單,且數據不會發布到表單 Bean。

服務器端的驗證

WebLogic Workshop 提供兩種完成服務端驗證的方法,一種是在表單 Bean 中使用 Java 來實現 validate 方法,另一種是使用 Struts ValidatorPlugIn 進行基於 XML 的驗證。這些示例會在 WebLogic Workshop 樣例應用程序中顯示,並在此處對其進行描述。要獲得樣例代碼,請在下列安裝位置開始:

<WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/validation/...

基於 Java 的驗證

要使用表單 Bean 的 validate 方法驗證用戶輸入,請按照此列表中概述的步驟進行操作。請注意,這些示例來自下列樣例頁面流和相關文件:

<WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/validation/basic

  • message-resources 標記添加到 JPF 文件中的控制器類,例如:
    /**
    * @jpf:controller nested="true"
     * @jpf:message-resources resources="validation.basic.Messages"
     * 
    */ public class Controller extends PageFlowController { ...

    資源文件位於 Web 項目的 /WEB-INF/classes/... 文件夾下,並具有 properties 擴展名。在上例中,Messages.properties 文件位於 /WEB-INF/classes/validation/basic。下文將描述此文件的內容。

    注意:在示例中,請注意此處使用的對應命名要求。如果消息資源文件是 <project-root>/WEB-INF/classes/validation/basic/Messages.properties,則在 <project-root>/validation/basic/*.jpf 頁面流批註中引用此文件的方法是 @jpf:message-resources resources="validation.basic.Messages"

  • @jpf:validation-error-forward 批註添加到使用驗證的操作。例如:
     /**
    * @jpf:action 
    * @jpf:forward name="success" path="success.jsp"
      * @jpf:validation-error-forward name="failure" return-to="currentPage"
      */
    public Forward submitForm( Form form )
      {
    return new Forward( "success" );
      }

    此批註提供靈活的機制,如果由於運行了批註的操作而出現表單驗證錯誤,它可以指明應裝載哪個頁面或應運行哪個操作。有關詳細信息,請參閱 @jpf:validation-error-forward 批註主題。

    下列流視圖屏幕說明了此樣例頁面流中的操作和頁面之間的關係。

    conValidationFlowView.gif

  • validate 方法添加到表單 Bean 類。此方法必須具有示例中給出的確切簽名:
    public ActionErrors validate( ActionMapping mapping, HttpServletRequest request )
    {
        ActionErrors errs = new ActionErrors();
        int at = _email.indexOf( '@' );
        int dot = _email.lastIndexOf( '.' );
        if ( at == -1 || at == 0 || dot == -1 || at > dot )
        {
           errs.add( "email", new ActionError( "badEmail" ) );
        }
        if ( _zipCode.length() != 5 )
        {
           errs.add( "zipCode", new ActionError( "badZip", new Integer( 5 ) ) );
        }
        return errs;
    }

    validate 方法中,實現各種表單字段的驗證邏輯。如果出現錯誤,請添加新的操作錯誤。在示例中,zipCode 引用了 JSP (<netui:error value="zipCode"/>) 中的 netui:error 標記,badZip 引用了 Messages.properties 文件中的消息密鑰。請注意,new Integer(5) 是錯誤字符串中的第一個替換對象。例如,在以後的描述中可以看到一個消息字符串: “The zip code has to be exactly {0} characters.”。這種情況下,Integer(5) 對象將替換 {0}。ActionErrors 支持最多帶有四個附加替換對象的構造方法。

    有關完整示例,請參閱<WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/validation/basic/Controller.jpf 中的頁面流控制器類。

  • 在顯示錯誤(通常是表單頁面)的 JSP 文件中,添加 netui:error 標記以顯示錯誤消息。例如:
        <netui:form action="submitForm">
    <table>
    <tr>
    <td><p>Enter E-mail Address:</p></td>
    <td>
    <netui:textBox dataSource="{actionForm.email}"/>
    </td>
    <td>
    <netui:error value="email"/>
    </td>
    </tr>

    <tr>
    <td><p>Enter 5-digit Zip Code:</p></td>
    <td>
    <netui:textBox dataSource="{actionForm.zipCode}"/>
    </td>
    <td>
    <netui:error value="zipCode"/>
    </td>
    </tr>
    </table>
            <netui:button>Submit</netui:button>
            <netui:button action="exit">Exit</netui:button>
        </netui:form> 

    在示例中,將在相關表單字段旁顯示錯誤。有關完整示例,請參閱<WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/validation/basic/formPage.jsp。

  • 另外(或作爲替代方法),可以將 netui:errors 標記添加到 JSP (<netui:errors/>),例如在 JSP 底部。此標記將顯示所有找到的錯誤概要。
  • 當在 JSP 中顯示錯誤時,資源文件包含實際的錯誤消息和要應用的任何專用 HTML 格式。請記住,此文件位於 /WEB-INF/classes/... 下,並具有 properties 擴展名。在此示例中,Messages.properties 文件位於 /WEB-INF/classes/validation/basic中。
    badEmail=Bad email address.
    badZip=The zip code has to be exactly {0} characters.
    errors.header=<br><hr><font color="Blue">List of errors, using the &lt;netui:error&gt; tag:<ul>
    errors.prefix=<li>
    errors.suffix=
    errors.footer=</ul></font>
    error.prefix=<font color="Red">
    error.suffix=</font>

    請注意,在示例中,當輸入不正確的 zipCode 時,badZip 是需要顯示的錯誤消息的消息密鑰。文件中的其他行創建 netui:errornetui:errors 標記的格式,以便單個錯誤消息用紅色顯示,錯誤概要用藍色顯示爲一個列表,前加標頭“List of errors, using the <netui:error> tag:”。

基於 XML 的驗證

要使用 Struts ValidatorPlugIn 驗證用戶輸入,請按照此列表中概述的步驟進行操作。請注意,這些示例來自下列樣例頁面流和相關文件:

<WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/validation/validator

  • message-resourcesstruts-merge 批註添加到 JPF 文件中的控制器類。例如:
    /**
     * @jpf:controller nested="true" struts-merge="/WEB-INF/strutsValidator-merge-config.xml"
    * @jpf:message-resources resources="validation.validator.Messages"          
     * 
     */
    public class Controller extends PageFlowController
    { 
    ...

    @jpf:controller 批註的 struts-merge 特性會標識將使用的 Struts 合併文件。此 Struts 合併文件將指向 Struts ValidatorPlugIn 及其規則。以後會在此列表中對合並文件進行描述。

    資源文件也位於 Web 項目的 /WEB-INF/classes/... 文件夾下,並具有 properties 擴展名。在上例中,Messages.properties 文件位於 /WEB-INF/classes/validation/validator。請注意此處使用的對應命名要求。如果消息資源文件是 <project-root>/WEB-INF/classes/validation/validator/Messages.properties,則在 <project-root>/validation/validaor/*.jpf 頁面流批註中引用此文件的方法是 @jpf:message-resources resources="validation.basic.Messages"

  • @jpf:validation-error-forward 批註添加到使用驗證的操作。例如:

    /** * @jpf:action * @jpf:validation-error-forward name="failure" return-to="currentPage" * @jpf:forward name="success" path="success.jsp" */ public Forward submitForm( MyForm form ) { return new Forward( "success" ); }

    此批註提供靈活的機制,如果由於運行了批註的操作而出現表單驗證錯誤,它可以指明應裝載哪個頁面或應運行哪個操作。有關詳細信息,請參閱 @jpf:validation-error-forward 批註主題。

  • 在頁面流中,修改表單 Bean 定義以擴展 Struts 的 ValidatorForm 界面:
     public static class MyForm extends org.apache.struts.validator.ValidatorForm
    {
    ...
    有關此表單 Bean 類的完整示例,請參閱 <WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/validation/validator/Controller.jpf。
  • 在顯示錯誤(通常是表單頁面)的 JSP 文件中,添加 netui:error 標記以顯示錯誤消息:
        <netui:form action="submitForm">
    <table>
    <tr>
    <td><p>Enter E-mail Address:</p></td>
    <td>
    <netui:textBox dataSource="{actionForm.email}"/>
    </td>
    <td>
    <netui:error value="email"/>
    </td>
    </tr>

    <tr>
    <td><p>Enter Age:</p></td>
    <td>
    <netui:textBox dataSource="{actionForm.age}"/>
    </td>
    <td>
    <netui:error value="age"/>
    </td>
    </tr>
    </table>
            <netui:button>Submit</netui:button>
            <netui:button action="exit">Exit</netui:button>
        </netui:form> 

    在示例中,將在相關表單字段旁顯示錯誤。有關完整示例,請參閱<WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/validation/validaor/formPage.jsp。

  • 另外(或作爲替代方法),可以將 netui:errors 標記添加到 JSP (<netui:errors/>),例如在 JSP 底部。此標記將顯示所有找到的錯誤列表。
  • 定義 struts-merge 文件以指向 Struts 的默認可插接驗證器定義文件 validator-rules.xml,以及包含此特定表單的實際驗證規則的 XML 文件。在示例中,合併文件 strutsValidator-merge-config.xml 定義如下。可以在下列位置找到此合併文件:

    <WEBLOGIC_HOME>/samples/workshop/SamplesApp/WebApp/WEB-INF

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.1//EN"
    "http://jakarta.apache.org/struts/dtds/struts-config_1_1.dtd">
    <struts-config>
       <form-bean/>
       <global-exceptions/>
       <global-forwards/>
       <action-mappings>
       </action-mappings>
     <plug-in className="org.apache.struts.validator.ValidatorPlugIn">
       <set-property property="pathnames"
       value="/WEB-INF/validator-rules.xml,/WEB-INF/strutsValidator-validation.xml"/>
     </plug-in>
    </struts-config>

    默認可插接驗證器定義包含在 validator-rules.xml 文件中,該文件位於 WEB-INF 中。實際的表單驗證規則應在單獨的文件中定義。在示例中,該文件稱爲 strutsValidator-validation.xml,它也位於 /WEB-INF 中。下面將描述此文件。
  • 在 strutsValidator-validation.xml 文件中,使用默認驗證器定義實現實際的表單驗證。例如:
    <form-validation>
    <formset>
    <form name="myForm">
    <field property="email" depends="required">
    <arg0 key="email.displayName"/>
    </field>
    <field property="age" depends="required,integer">
    <arg0 key="age.displayName"/>
    </field>
    </form>
    </formset>
    </form-validation>
  • 當在 JSP 文件中顯示錯誤時,資源文件包含實際的錯誤消息和要應用的任何專用 HTML 格式。請記住,此文件位於 WEB-INF/classes/... 下,並具有 properties 擴展名。在此示例中,Messages.properties 文件位於 /WEB-INF/classes/validation/validator 中。
    errors.header=<br><hr><font color="Blue">List of errors, using the &lt;netui:error&gt; tag:<ul>
    errors.prefix=<li>
    errors.suffix=
    errors.footer=</ul></font>
    error.prefix=<font color="Red">
    error.suffix=</font>
    errors.required={0} is required.
    errors.integer={0} must be an integer.
    email.displayName=The email address 
    age.displayName=The age

    請注意,在示例中,email.displayName 描述表單字段名,而 errors.required 描述用於缺少(但必需)表單字段項的錯誤消息。如果用戶沒有鍵入電子郵件地址,則出現的錯誤消息將是“The email address is required”。文件中的其他行創建 netui:errornetui:errors 標記的格式,以便單個錯誤消息用紅色顯示,錯誤概要用藍色顯示爲一個列表,前加標頭“List of errors, using <netui:error> tag:”。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章