在大多數情況下，當用戶通過表單輸入數據時，我們要確保輸入的值有效，然后才能進行其他操作，例如將數據儲存到數據庫中或用于確定下一步操作。表單驗證經常使用客戶端 JavaScript 來完成。此方法在 WebLogic Workshop 中也適用。此外，服務器端的驗證可在服務器端檢查用戶輸入。后一方法的優點有：
客戶端的驗證
WebLogic Workshop 為 netui:form 標記及其表單字段提供了許多特性，例如，可以用來調用 JavaScript 的 onClick 和 onBlur。例如，可以有 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 forms 和 elements 數組訪問表單及其字段的。如果想使用各種字段的正確名稱，需要使用 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:button 和 netui:imageButton 標記，可以通過標記的 onClick 特性調用 JavaScript 函數，如下例所示：
<netui:button value="submit" onClick="return isValidForm();" />
當用戶單擊按鈕時，如果驗證成功，JavaScript 函數 isValidForm 會檢查表單字段并返回 true。或者，如果不是所有的輸入值都正確，isValidForm 函數顯示帶有錯誤消息的對話框，并返回 false。（此功能的實現并沒有實際顯示在樣例代碼中。）
對于 netui:anchor 和 netui:imageAnchor 標記（兩者的實現依賴于 JavaScript 提交表單），如果驗證成功，JavaScript 驗證函數必須包含其他代碼以設置 JavaScript Form 對象的 method 和 action 屬性，并調用其 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:anchor 或 netui: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 批注主題。
下列流視圖屏幕說明了此樣例頁面流中的操作和頁面之間的關系。
- 將 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 <netui:error> tag:<ul>
errors.prefix=<li>
errors.suffix=
errors.footer=</ul></font>
error.prefix=<font color="Red">
error.suffix=</font>
請注意，在示例中，當輸入不正確的 zipCode 時，badZip 是需要顯示的錯誤消息的消息密鑰。文件中的其他行創建 netui:error 和 netui:errors 標記的格式，以便單個錯誤消息用紅色顯示，錯誤概要用藍色顯示為一個列表，前加標頭“List of errors, using the <netui:error> tag:”。
posted on 2005-12-30 16:02
Parmy 閱讀(1166)
評論(0) 編輯 收藏