一、实验要求
编写包含表单的HTML文档。表单中可以输入任意字符（单行文本输入框）。要求能判断输入不能为空且字符必须为5个，输入完毕单击“判断”（提交输入按钮）按钮，发送到服务器端完成审查验证，如果用户的输入不符合要求则返回具体的提示信息，同时清空文本框内容并激活文本框输入焦点。如果正确返回输入格式正确的提示信息。
要求:服务器端基于JSP内置对象实现对客户端输入信息的验证。
二、实验思路
1.前端页面：form.html：展示表单、显示错误信息、清空输入框内容、聚焦
代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>服务器端表单验证</title><style>.error { color: red; margin-top: 10px; }.info { color: blue; margin-top: 10px; }</style>
</head>
<body><h2>基于JSP内置对象的服务器端验证</h2><form action="validate.jsp" method="post" accept-charset="UTF-8">输入内容（5个字符）：<br/><input type="text" name="userInput" id="userInput" /><br/><br/><input type="submit" value="判断" />
</form><div id="messageArea" class="info"></div><script>window.onload = function() {const urlParams = new URLSearchParams(window.location.search);let errorMsg = urlParams.get('errorMsg');if (errorMsg) {// 解码错误信息errorMsg = decodeURIComponent(errorMsg);const msgDiv = document.getElementById('messageArea');msgDiv.innerHTML = errorMsg;msgDiv.className = 'error';const inputBox = document.getElementById('userInput');inputBox.value = '';inputBox.focus();history.replaceState(null, '', window.location.pathname);}};
</script></body>
</html>
利用JavaScript进行前端交互，实现验证失败后清空文本框和激活焦点
-
window.onload：确保页面加载完成后再执行 JS，避免找不到页面元素
-
new URLSearchParams(location.search)：解析 URL 中的参数（JSP 传回的错误信息）
-
decodeURIComponent()：将 URL 编码的中文解码还原
-
value = ''：清空输入框内容
-
focus()：让输入框获得光标焦点
-
replaceState()：删除 URL 中的参数，防止用户刷新页面后重复显示错误
2.服务器验证：validate.jsp:用 JSP 内置对象 request 获取参数、验证、返回结果
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%// 1. 解决中文乱码（核心）request.setCharacterEncoding("UTF-8");// 2. 获取输入String input = request.getParameter("userInput");String errorMsg = null;boolean isValid = false;int realLength = 0;// 3. 验证if (input == null || input.trim().isEmpty()) {errorMsg = "❌ 错误：输入不能为空！";} else {// 去掉前后空格input = input.trim();// 获取字符长度（Java中length()对中文就是1，只要编码不乱）realLength = input.length();if (realLength != 5) {errorMsg = "❌ 错误：必须输入5个字符！（当前字符数：" + realLength + "）";} else {isValid = true;}}// 4. 返回结果if (isValid) {// 正确情况：显示成功页面response.setContentType("text/html;charset=UTF-8");
%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>验证成功</title><style>.success { color: green; font-size: 18px; margin-top: 20px; }</style></head><body><h2>验证结果</h2><div class="success">✅ 输入格式正确！<br/>您输入的内容是：<%= input %><br/>字符数：<%= realLength %></div><br/><a href="form.html">返回继续测试</a></body></html>
<%} else {// 错误情况：跳回表单页，传递错误信息String encodedMsg = java.net.URLEncoder.encode(errorMsg, "UTF-8");response.sendRedirect("form.html?errorMsg=" + encodedMsg);}
%>
三、问题总结
1.最开始没有考虑到中文乱码，出现了以下这种情况：
于是利用request.setCharacterEncoding("UTF-8")解决了中文乱码。
2.最开始输入五个中文汉字但出错，以为是一个汉字占三个字节的原因，后面发现是编码问题，统一 Eclipse + Tomcat + JSP 为 UTF-8，不乱码后长度就正确了。
