87 lines
3.6 KiB
Plaintext
87 lines
3.6 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||
<%@ taglib prefix="s" uri="/struts-tags" %>
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>验证与错误流实验室 - Struts2</title>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; max-width: 900px; margin: 40px auto; padding: 20px; background:#f7f8fa; }
|
||
h1 { color:#c0392b; }
|
||
.card { background:#fff; border-radius:12px; padding:20px; margin:18px 0; box-shadow:0 4px 14px rgba(0,0,0,.06); }
|
||
.lab { background:#fff7e6; border-left:4px solid #fa8c16; padding:15px; border-radius:8px; margin:20px 0; }
|
||
.quick { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
|
||
button { background:#c0392b; color:white; border:none; padding:10px 16px; border-radius:6px; cursor:pointer; }
|
||
input { padding:10px; width:100%; box-sizing:border-box; }
|
||
.field { margin:12px 0; }
|
||
.ok { background:#eafaf1; color:#1e8449; padding:12px; border-radius:8px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>⚠️ 验证与错误流实验室</h1>
|
||
|
||
<div class="lab">
|
||
<strong>实验任务卡</strong>
|
||
<ul>
|
||
<li>先点“填入错误示例”，提交后观察字段级错误是如何显示的</li>
|
||
<li>再点“填入正确示例”，观察 Action 成功后的返回</li>
|
||
<li>思考：为什么 Struts2 的校验失败会回到 input 页，而不是直接报 500？</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="quick">
|
||
<button type="button" onclick="fillBad()">填入错误示例</button>
|
||
<button type="button" onclick="fillGood()">填入正确示例</button>
|
||
</div>
|
||
|
||
<s:if test="resultMessage != null">
|
||
<div class="ok"><s:property value="resultMessage"/></div>
|
||
</s:if>
|
||
|
||
<s:form action="validation_submit" method="post">
|
||
<div class="field">
|
||
<label>用户名</label>
|
||
<s:textfield name="username"/>
|
||
<s:fielderror fieldName="username" cssStyle="color:#e74c3c;font-size:12px;"/>
|
||
</div>
|
||
<div class="field">
|
||
<label>邮箱</label>
|
||
<s:textfield name="email"/>
|
||
<s:fielderror fieldName="email" cssStyle="color:#e74c3c;font-size:12px;"/>
|
||
</div>
|
||
<div class="field">
|
||
<label>年龄</label>
|
||
<s:textfield name="age"/>
|
||
<s:fielderror fieldName="age" cssStyle="color:#e74c3c;font-size:12px;"/>
|
||
</div>
|
||
<button type="submit">提交实验</button>
|
||
</s:form>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>学习点</h3>
|
||
<ul>
|
||
<li>字段错误通过 <code>addFieldError()</code> 收集</li>
|
||
<li>JSP 使用 <code><s:fielderror></code> 精准展示错误</li>
|
||
<li>成功路径与失败路径在同一个页面闭环，对学习最直观</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p><a href="learn">← 返回学习中心</a></p>
|
||
|
||
<script>
|
||
function fillBad() {
|
||
document.querySelector('input[name="username"]').value = 'a';
|
||
document.querySelector('input[name="email"]').value = 'bad-email';
|
||
document.querySelector('input[name="age"]').value = '-1';
|
||
}
|
||
function fillGood() {
|
||
document.querySelector('input[name="username"]').value = 'zhangsan';
|
||
document.querySelector('input[name="email"]').value = 'zhangsan@example.com';
|
||
document.querySelector('input[name="age"]').value = '22';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|