在这章中我们将学习如何编写代码来生成JavaScript以进行客户端验证。在上一章中我们创建了Login-validator.xml来定义服务器端的验证。在本章我们会使用相同的Login-validator.xml来生成客户端JavaScript。
创建JSP页面
这是登录的jsp页面的代码(loginClientSideValidation.jsp)
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>Struts 2 Login Application!</title>
<link href="<s:url value="/css/main.css"/>" rel="stylesheet"
type="text/css"/>
</head>
<body>
<s:form action="doLoginClientSideValidation" method="POST" validate="true">
<tr>
<td colspan="2">
Login
</td>
</tr>
<s:actionerror />
<s:fielderror />
<s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
<s:submit value="Login" align="center"/>
</s:form>
</body>
</html>
注意在上面的代码中我们只是在<s:form标签>中添加了validate="true"。这就是我们所做的工作，剩下的都交给Struts2的校验框架来处理了。校验框架生成JavaScript来验证客户端的表单。
struts.xml文件中的改动
将下面的代码添加到struts.xml :
<result>/pages/loginClientSideValidation.jsp</result> </action> <action name="doLoginClientSideValidation" class="net.roseindia.Login"> <result name="input">/pages/loginClientSideValidation.jsp</result> <result name="error">/pages/loginClientSideValidation.jsp</result> <result>/pages/loginsuccess.jsp</result> </action>
当doLoginClientSideValidation handles处理验证请求的时候，showLoginClientSideValidation显示了登录表单。
在index.html中添加链接
最后我们在index.html中添加链接访问登录表单以便进行客户端验证的测试。
<ul> <li><a href="roseindia/showLoginClientSideValidation.action">Login Application (Client Side Validation)</a></li> </ul>
测试客户端验证
启动Tomcat并访问http://localhost:8080/struts2tutorial/。你的浏览器应该显示如下 :
现在点击"Login Application (客户端验证)"链接，你的浏览器将会显示如下的登录页面 :
什么都不输入直接点击"Login"按钮。JavaScript将会显示如下的错误信息 :
现在输入"Login Name"并点击"Login"按钮，浏览器将会显示下面的错误信息 :
检查生成的JavaScript
<html>
<head>
<title>Struts 2 Login Application!</title>
<link href="/struts2tutorial/css/main.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<script src="/struts2tutorial/struts/xhtml/validation.js"></script>
<form namespace="/roseindia" id="doLoginClientSideValidation" name="doLoginClientSideValidation" onsubmit="return validateForm_doLoginClientSideValidation();" action="/struts2tutorial/roseindia/doLoginClientSideValidation.action" method="POST">
<table class="wwFormTable">
<tr>
<td colspan="2">
Login
</td>
</tr>
<tr>
<td class="tdLabel"><label for="doLoginClientSideValidation_username" class="label">Login name:</label></td>
<td>
<input type="text" name="username" value="" id="doLoginClientSideValidation_username"/>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="doLoginClientSideValidation_password" class="label">Password:</label></td>
<td
><input type="password" name="password" id="doLoginClientSideValidation_password"/>
</td>
</tr>
<tr>
<td colspan="2">
<div align="center"><input type="submit" id="doLoginClientSideValidation_0" value="Login"/>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function validateForm_doLoginClientSideValidation() {
form = document.getElementById("doLoginClientSideValidation");
clearErrorMessages(form);
clearErrorLabels(form);
var errors = false;
// field name: username
// validator name: requiredstring
if (form.elements['username']) {
field = form.elements['username'];
var error = "Login name is required";
if (field.value != null && (field.value == "" || field.value.replace(/^\s+|\s+$/g,"").length == 0)) {
addError(field, error);
errors = true;
}
}
// field name: password
// validator name: requiredstring
if (form.elements['password']) {
field = form.elements['password'];
var error = "Password is required";
if (field.value != null && (field.value == "" || field.value.replace(/^\s+|\s+$/g,"").length == 0)) {
addError(field, error);
errors = true;
}
}
return !errors;
}
</script>
</body>
</html>
你可以看到，上面就是JavaScript代码和函数，生成的validateForm_doLoginClientSideValidation()方法就是用来进行客户端验证的。
您还没有登录,请您登录后再发表评论