一、Struts2框架内置标签库
在不使用Struts2框架时,一般表单都是使用HTML中的form标签,而Struts2框架中也提供了一个标签库。
不过在JSP页面中使用Struts2框架内置标签库时需要在头部导入标签库。
下面是Struts2框架内置的form标签以及HTML中的form标签对比。
①、index.jsp
文件内容
<%--
Created by IntelliJ IDEA.
User: hestyle
Date: 2019/10/20
Time: 2:35 下午
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 使用struts中的标签需要导入struts-tags --%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>用户注册</title>
</head>
<body>
<hr>
struts2内置的form标签
<s:form action="register">
<s:textfield name="username" label="用户名"/>
<s:password name="password" label="密码" />
<s:textfield name="birthday" label="生日" />
<%--
checkboxlist复选框,
list是复选框的选项,第一个'编码'是value(提交到后端action中的值),第二个'编码'是选项名称,后面依次类推
--%>
<s:checkboxlist name="hobbies" label="爱好" list="#{'编码':'编码', '撩妹':'撩妹', '加班':'加班'}"/>
<%--
radio单选框
list是复选框的选项,第一个'true'是value(提交到后端action中的值),第二个'已婚'是选项名称,后面依次类推
--%>
<s:radio name="married" label="婚姻状况" list="#{'true':'已婚', 'false':'未婚'}"/>
<s:submit value="注册"></s:submit>
</s:form>
<hr>
html原始form标签
<form action="${pageContext.request.contextPath}/register.action" method="post">
<table border="1px">
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday"></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobbies" value="编码">编码
<input type="checkbox" name="hobbies" value="撩妹">撩妹
<input type="checkbox" name="hobbies" value="加班">加班
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="married" value="true">已婚
<input type="radio" name="married" value="false" checked="checked">未婚
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
②、浏览器的显示效果
浏览器中页面的源码
<html>
<head>
<title>用户注册</title>
</head>
<body>
<hr>
struts2内置的form标签
<form id="register1" name="register1" action="/Struts2_From_Test_war_exploded/register1.action" method="post">
<table class="wwFormTable">
<tbody><tr>
<td class="tdLabel"><label for="register1_username" class="label">用户名:</label></td>
<td class="tdInput"><input type="text" name="username" value="" id="register1_username"></td>
</tr>
<tr>
<td class="tdLabel"><label for="register1_password" class="label">密码:</label></td>
<td class="tdInput"><input type="password" name="password" id="register1_password"></td>
</tr>
<tr>
<td class="tdLabel"><label for="register1_birthday" class="label">生日:</label></td>
<td class="tdInput"><input type="text" name="birthday" value="" id="register1_birthday"></td>
</tr>
<tr>
<td class="tdLabel"><label for="register1_hobbies" class="label">爱好:</label></td>
<td class="tdInput"><input type="checkbox" name="hobbies" value="编码" id="register1_hobbies-1">
<label for="register1_hobbies-1" class="checkboxLabel">编码</label>
<input type="checkbox" name="hobbies" value="撩妹" id="register1_hobbies-2">
<label for="register1_hobbies-2" class="checkboxLabel">撩妹</label>
<input type="checkbox" name="hobbies" value="加班" id="register1_hobbies-3">
<label for="register1_hobbies-3" class="checkboxLabel">加班</label>
<input type="hidden" id="__multiselect_register1_hobbies" name="__multiselect_hobbies" value=""></td>
</tr>
<tr>
<td class="tdLabel"><label for="register1_married" class="label">婚姻状况:</label></td>
<td class="tdInput"><input type="radio" name="married" id="register1_marriedtrue" value="true"><label for="register1_marriedtrue">已婚</label>
<input type="radio" name="married" id="register1_marriedfalse" value="false"><label for="register1_marriedfalse">未婚</label>
</td>
</tr>
<tr>
<td colspan="2"><div class="formButton"><input type="submit" value="注册" id="register1_0">
</div></td>
</tr>
</tbody></table></form>
<hr>
html原始form标签
<form action="/Struts2_From_Test_war_exploded/register2.action" method="post">
<table border="1px">
<tbody><tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday"></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobbies" value="编码">编码
<input type="checkbox" name="hobbies" value="撩妹">撩妹
<input type="checkbox" name="hobbies" value="加班">加班
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="married" value="true">已婚
<input type="radio" name="married" value="false" checked="checked">未婚
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</tbody></table>
</form>
</body></html>
不难看出,struts中内置的标签库是对html中的标签进行了封装,几乎没啥区别。
③、加上一个必填项标记样式
看看效果先
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 使用struts中的标签需要导入struts-tags --%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>用户注册</title>
</head>
<s:head></s:head>
<body>
<hr>
struts2内置的form标签
<s:form action="register1">
<%--
requiredLabel设置是否为必填项
requiredPosition=(left、right),必填标记在label的左、右
--%>
<s:textfield name="username" label="用户名" requiredLabel="true" requiredPosition="right"/>
<s:password name="password" label="密码" requiredLabel="true" requiredPosition="right"/>
<s:textfield name="birthday" label="生日" />
<%--
checkboxlist复选框,
list是复选框的选项,第一个'编码'是value(提交到后端action中的值),第二个'编码'是选项名称,后面依次类推
--%>
<s:checkboxlist name="hobbies" label="爱好" list="#{'编码':'编码', '撩妹':'撩妹', '加班':'加班'}"/>
<%--
radio单选框
list是复选框的选项,第一个'true'是value(提交到后端action中的值),第二个'已婚'是选项名称,后面依次类推
--%>
<s:radio name="married" label="婚姻状况" list="#{'true':'已婚', 'false':'未婚'}"/>
<s:submit value="注册"></s:submit>
</s:form>
</body>
</html>
如果需要将标记修改为红色,需要在头部加上<s:head></s:head>
二、Struts2表单设置错误回显
不使用框架时,判断前端页面提交的表单字段合法性可以通过js检查(但是容易被修改),所以我们会在服务器后台进行判断。当表单出现不合法的字段时,需要把前端提交的表单信息返回给前端,并且提示错误字段的详细信息,可以通过封装一个表单模型,模型包含提交的字段以及字段的错误信息。
使用了Struts2框架后,这一部分操作可以交给Struts2框架来实现。下面将演示一个日期格式错误的错误回显效果。(这只是初步体验,后期会更新一个Action判断表单的博客。)
①、项目目录结构:
②、src源码部分
User.java
模型
package cn.hestyle.model;
import java.util.Date;
public class User {
private String username;
private String password;
private Date birthday;
private String hobbies;
private boolean married;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getHobbies() {
return hobbies;
}
public void setHobbies(String hobbies) {
this.hobbies = hobbies;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public boolean isMarried() {
return married;
}
public void setMarried(boolean married) {
this.married = married;
}
@Override
public String toString() {
return "User{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
", birthday=" + birthday +
", hobbies='" + hobbies + '\'' +
", married=" + married +
'}';
}
}
RegisterAction
动作类
package cn.hestyle.web.action;
import cn.hestyle.model.User;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
/**
* 通过实现ModelDriven<User>接口,封装表单信息为User模型
*/
public class RegisterAction extends ActionSupport implements ModelDriven<User> {
//user的各个属性必须实现getter、setter方法,并且user需要手动new出来
private User user = new User();
/**
* 动作处理方法
* @return
*/
public String register(){
System.out.println(user);
return "success";
}
/**
* 接口ModelDriven<User>需要实现的方法
* @return
*/
@Override
public User getModel() {
return user;
}
}
③、前端jsp界面
index.jsp
页面
<%--
Created by IntelliJ IDEA.
User: hestyle
Date: 2019/10/20
Time: 2:35 下午
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 使用struts中的标签需要导入struts-tags --%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>用户注册</title>
</head>
<%-- 设置错误信息为红色(突出样式) --%>
<s:head></s:head>
<body>
<%--fielderror作用是提示字段错误信息 --%>
<s:fielderror></s:fielderror>
<s:form action="register">
<s:textfield name="username" label="用户名"/>
<%-- showPassword的作用是当表单中字段出现问题时,把之前提交的表单回显保留 --%>
<s:password name="password" label="密码" showPassword="true"/>
<s:textfield name="birthday" label="生日"/>
<%--
checkboxlist复选框,
list是复选框的选项,第一个'编码'是value(提交到后端action中的值),第二个'编码'是选项名称,后面依次类推
--%>
<s:checkboxlist name="hobbies" label="爱好" list="#{'编码':'编码', '撩妹':'撩妹', '加班':'加班'}"/>
<%--
radio单选框
list是复选框的选项,第一个'true'是value(提交到后端action中的值),第二个'已婚'是选项名称,后面依次类推
--%>
<s:radio name="married" label="婚姻状况" list="#{'true':'已婚', 'false':'未婚'}"/>
<s:submit value="注册"></s:submit>
</s:form>
</body>
</html>
success.jsp
页面
<%--
Created by IntelliJ IDEA.
User: hestyle
Date: 2019/10/22
Time: 5:01 下午
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册成功!</title>
</head>
<body>
注册成功!
</body>
</html>
④、struts配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
"http://struts.apache.org/dtds/struts-2.5.dtd">
<struts>
<!-- 开启开发模式,当出现exception时,显示详细的信息 -->
<constant name="struts.devMode" value="true"></constant>
<package name="user" extends="struts-default">
<!-- 申明一个register动作,并且使用RegisterAction中的register方法 -->
<action name="register" class="cn.hestyle.web.action.RegisterAction" method="register">
<result name="success">/success.jsp</result>
<!-- input表示的是出现exception时,重新回到注册页面,这时struts会把表单信息回填并提示非法字段信息 -->
<result name="input">/index.jsp</result>
</action>
</package>
</struts>
⑤、浏览器访问效果
!
在这里插入图片描述
这段默认的提示的信息并没有明确指出是格式错误,我们可以进行修改。
在User模型所在的包下新建一个配置文件模型名.properties
,比如当前设置的是User模型,文件名为User.properties
#invalid.fieldvalue.模型中的字段,表示表单该字段填写非法时提示设置的信息
invalid.fieldvalue.birthday=date format "yyyy-MM-dd"
重启服务器后,重新输入错误的日期字段信息
其实在
User.properties
文件我们直接提示中文错误信息,但是由于properties文件默认编码是iOS-5529-1
,这样造成前端会出现提示信息中中文乱码。。。
可以看出struts2标签库中的form标签是对HTML标签的封装,并且加上一些特定的样式,比如字段错误信息提示、红色突出等等,使用更加简洁一些。
关于Struts2中的表单验证以及错误回显请参考我的博客:
Struts2框架之Action中进行表单验证与错误回显
Struts2框架之xml声明式表单验证与错误回显