在大多数情况下,当用户通过表单输入数据时,我们要确保输入的值有效,然后才能进行其他操作,例如将数据储存到数据库中或用于确定下一步操作。表单验证经常使用客户端 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 阅读(1159)
评论(0) 编辑 收藏