JSP服務器端表單驗證
一、引言
在Web開發中，表單驗證是保障數據合法性的重要環節。《Web編程技術》第五次實驗要求，詳細講解如何基于JSP內置對象實現服務器端表單驗證，包括表單設計、驗證邏輯、交互反饋等核心功能。最終實現：輸入5個非空字符，否則返回提示信息并清空輸入框，聚焦待重新輸入。
二、技術實現方案
1. 核心需求
- 表單功能：單行文本輸入框，提交后驗證是否為空且長度為5。
- 交互要求：驗證失敗時顯示錯誤信息，清空輸入框并激活焦點；成功時提示格式正確。
- 技術限制：僅使用JSP內置對象（
request、response），不依賴框架。
2. 架構設計
- 表單頁面（form.html）：負責用戶輸入和提示信息展示，通過HTML/CSS美化界面。
- 驗證頁面（validate.jsp）：接收表單數據，執行服務器端驗證，通過重定向傳遞結果參數。
三、代碼實現與解析
1.項目結構
2. 表單頁面（form.html）
代碼示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單驗證</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}form {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 300px;}label {display: block;margin-bottom: 5px;}input[type="text"] {width: 100%;padding: 8px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}input[type="submit"] {background-color: #007BFF;color: white;padding: 10px 15px;border: none;border-radius: 4px;cursor: pointer;width: 100%;}input[type="submit"]:hover {background-color: #0056b3;}.error-message {color: red;margin-bottom: 10px;}</style>
</head><body><form action="validate.jsp" method="post"><div id="error-message" class="error-message"></div><label for="inputText">請輸入 5 個字符：</label><input type="text" id="inputText" name="inputText"><input type="submit" value="判斷"></form><script>const urlParams = new URLSearchParams(window.location.search);const message = urlParams.get('message');const shouldClear = urlParams.get('clear');if (message) {document.getElementById('error-message').textContent = message;}if (shouldClear =='true') {document.getElementById('inputText').value = '';document.getElementById('inputText').focus();} </script>
</body></html>
關鍵邏輯
- CSS美化：使用flex布局實現頁面居中，添加陰影和圓角提升視覺效果，錯誤信息紅色顯示。
- JavaScript交互：通過
URLSearchParams解析URL參數，根據message顯示錯誤信息，根據shouldClear執行清空和聚焦操作。
2. 驗證頁面（validate.jsp）
代碼示例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% // 1. 獲取表單數據 String inputText = request.getParameter("inputText"); String message = ""; boolean shouldClear = false; // 2. 服務器端驗證 if (inputText == null || inputText.trim().isEmpty()) { message = "輸入不能為空，請重新輸入！"; shouldClear = true; } else if (inputText.length() != 5) { message = "輸入的字符必須為5個，請重新輸入！"; shouldClear = true; } else { message = "輸入格式正確！"; } // 3. 編碼處理，避免URL亂碼 String encodedMessage = java.net.URLEncoder.encode(message, "UTF-8"); // 4. 重定向回表單頁面，攜帶參數 response.sendRedirect("form.html?message=" + encodedMessage + "&clear=" + shouldClear);
%>
關鍵邏輯
- 輸入驗證：使用
request.getParameter獲取輸入值，通過條件判斷驗證非空和長度。 - 重定向機制：通過
response.sendRedirect返回表單頁面，拼接URL參數傳遞驗證結果（message）和操作指令（shouldClear）。 - 編碼處理：使用
URLEncoder對中文信息編碼，確保URL參數正確傳遞。
四、效果演示
1. 輸入為空時
- 操作：點擊提交按鈕（輸入框為空）。
- 結果：
- 跳回表單頁面，顯示紅色錯誤信息“輸入不能為空”。
- 輸入框內容清空，光標自動聚焦（如圖1）。
圖1：輸入為空的驗證效果
2. 輸入長度錯誤時
- 操作：輸入3個字符（如“abc”）。
- 結果：
- 提示“輸入的字符必須為5個”，輸入框清空并聚焦（如圖2）。
- 提示“輸入的字符必須為5個”，輸入框清空并聚焦（如圖2）。
圖2：長度不符的驗證效果
3. 輸入正確時
- 操作：輸入5個字符（如“12345”）。
- 結果：提示“輸入格式正確”，清除輸入框（如圖3）。
圖3：輸入正確的驗證效果
五、核心技術點解析
JSP內置對象的作用
request：獲取客戶端提交的表單數據（request.getParameter）。response：控制服務器響應，通過sendRedirect實現頁面重定向。
六、注意事項
- 輸入框ID一致性：確保
form.html中的輸入框id="inputText"與JavaScript代碼中的選擇器一致。 - 重定向與轉發的區別：
- 重定向（
sendRedirect）：瀏覽器發起新請求，URL會改變，適合跨頁面傳參。 - 轉發（
forward）：服務器內部跳轉，URL不變，無法跨域傳遞參數，此處不適用。
- 重定向（
- 瀏覽器緩存問題：若提示信息不更新，可在
validate.jsp中添加響應頭禁止緩存：response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
七、總結
通過JSP內置對象實現服務器端表單驗證，核心在于：
- 表單頁面負責用戶交互和視覺反饋；
- 驗證頁面專注業務邏輯，通過重定向傳遞結果；
- URL參數作為橋梁，實現跨頁面數據傳遞。
![[創業之路-381]：企業法務 - 企業經營者，有哪些生產安全風險，哪些人承擔責任？承擔哪些責任？如何防范？](http://pic.xiahunao.cn/[創業之路-381]：企業法務 - 企業經營者，有哪些生產安全風險，哪些人承擔責任？承擔哪些責任？如何防范？)
