<%@ 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>&lt;s:fielderror&gt;</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>
