一、實驗目的

掌握JSP表單驗證在服務器端的實現技術，實現對用戶輸入字符的非空及長度為5的驗證，返回對應提示信息并優化用戶交互。

二、核心代碼實現

1. 前端表單

<form action="validate.jsp" method="post"> <table align="center"><tr><td><h1>請輸入任意字符（5個）：</h1></td></tr><tr><td><input type="text" id="input" name="input"> <input type="submit" value="判斷"></td></tr></table>  <script>document.getElementById("input").focus();</script>
</form>

• 表單提交至validate.jsp，name="input"需與后端參數名一致
• JavaScript實現頁面加載時輸入框自動聚焦

2. 服務端驗證

<%@ page contentType="text/html; charset=UTF-8" %>
<%
request.setCharacterEncoding("utf-8");
String input = request.getParameter("input");
int length = (input != null) ? input.length() : 0;if (length == 0) { %><script>alert("輸入不能為空！"); window.location.href = "index.html";</script>
<% } else if (length != 5) { %><script>alert("輸入字符數目不為5！"); window.location.href = "index.html";</script>
<% } else { %><script>alert("輸入格式正確！"); window.location.href = "index.html";</script>
<% } %>

• 處理中文亂碼：request.setCharacterEncoding("utf-8")
• 空值保護：避免null指針異常，先判斷輸入是否存在再獲取長度

三、調試關鍵問題

1. 中文亂碼

   • 原因：未統一請求與頁面編碼
   • 解決：JSP頂部添加charset=UTF-8，并設置請求編碼

2. 空輸入報錯

   • 原因：未處理用戶直接提交空表單的情況
   • 解決：增加input != null判斷，默認長度為0

3. 交互優化

   • 輸入不符合要求時，跳轉回表單頁面并自動聚焦輸入框，方便重新輸入

四、總結

• 實驗結果展示

登錄界面。

輸入正確的話會提示“輸入格式正確”
空輸入的話，會提示“輸入不能為空”，返回后輸入框清空并聚焦

輸入的字符數錯誤會提示“輸入字符數目不為5”，返回后輸入框重置

• 這次實驗讓我真正理解了 “Web 開發無小事”—— 哪怕是一個簡單的表單驗證，也需要考慮編碼、交互、安全、異常處理等多個維度。從表單搭建到服務端邏輯實現，再到調試優化，完整經歷了Web開發中表單驗證的全流程。深刻體會到后端驗證在數據合法性校驗中的關鍵作用，也對前后端交互細節有了更直觀的認識。
• 遇到的困難：
  漏掉name屬性導致后端獲取不到數據；
  未處理空輸入導致程序崩潰。鍵
• 改進方向
  后續可增加前端實時字符長度提示，減少無效提交
  嘗試用Servlet分離業務邏輯，使JSP專注頁面展示
  用頁面內的動態提示（如紅色字體）替代彈窗，避免多次跳轉影響體驗