实验五：基于JSP内置对象的服务器端表单验证
一、实验目标
掌握JSP表单验证在服务器端的实现技术。
二、设计思路
本实验设计一个简单的表单，用户输入任意字符后提交到服务器端，由JSP页面使用内置对象request接收用户输入，并在服务器端完成验证：
- 判断输入是否为空
- 判断输入长度是否为5个字符
验证结果通过同一个JSP页面返回给用户
三、文件结构
本项目只需要2个文件：
FormValidation/
├── index.jsp # 表单页面
└── validate.jsp # 验证页面
四、核心代码
4.1 表单页面（index.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表单验证实验</title><style>body {font-family: "微软雅黑";background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;height: 100vh;}.container {background: white;padding: 30px;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);width: 400px;text-align: center;}input {width: 80%;padding: 10px;margin: 15px 0;border: 1px solid #ccc;border-radius: 5px;font-size: 16px;}button {background-color: #4CAF50;color: white;padding: 10px 30px;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}</style>
</head>
<body><div class="container"><h2>🔐 表单验证实验</h2><p>请输入 <strong>5个字符</strong>（不能为空）</p><form action="validate.jsp" method="post"><input type="text" name="userInput" placeholder="请输入5个字符" autofocus><br><button type="submit">判断</button></form></div>
</body>
</html>4.2 验证页面（validate.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>验证结果</title><style>body {font-family: "微软雅黑";background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;height: 100vh;}.container {background: white;padding: 30px;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);width: 400px;text-align: center;}.success { color: green; font-size: 18px; margin: 20px 0; }.error { color: red; font-size: 18px; margin: 20px 0; }a { display: inline-block; margin-top: 20px; color: #4CAF50; text-decoration: none; }</style>
</head>
<body><div class="container"><h2>📋 验证结果</h2><%// 设置编码，防止中文乱码request.setCharacterEncoding("UTF-8");// 获取用户输入String input = request.getParameter("userInput");boolean isValid = false;String message = "";if (input == null || input.trim().isEmpty()) {message = "❌ 错误：输入不能为空！请输入5个字符。";} else if (input.trim().length() != 5) {message = "❌ 错误：输入必须是5个字符！您输入了 " + input.trim().length() + " 个字符。";} else {isValid = true;message = "✅ 正确！您的输入「" + input + "」符合要求（5个字符）。";}%><% if (isValid) { %><div class="success"><%= message %></div><% } else { %><div class="error"><%= message %></div><script>// 2秒后跳转回表单页面（清空并聚焦）setTimeout(function() {window.location.href = "index.jsp?clear=true";}, 2000);</script><% } %><a href="index.jsp">← 返回重新输入</a></div>
</body>
</html>
五、测试过程
网页的测试界面
当输入的字符是空时,不符合要求
当输入的字符小于5时
当输入的字符大于5时
当输入满足要求的字符时
并上传云端用公网访问
六、实验小结
遇到的问题及解决方法
问题1：中文乱码
现象：页面显示的提示信息为乱码
原因：表单提交时字符编码不一致
解决：在 JSP 开头加上 <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>，并用 request.setCharacterEncoding("UTF-8") 接收参数
问题2：验证失败后文本框没有清空
现象：验证失败后，返回表单页面仍显示之前输入的内容
原因：没有主动清空输入框的值
解决：在 JavaScript 中跳转前或跳转时传递参数 ?clear=true，在表单页面判断并清空
问题3：云服务器无法访问
现象：在本地浏览器无法访问 ECS 的 JSP 页面
原因：云服务器的安全组没有开放 8080 端口
解决：在阿里云控制台 → 安全组 → 添加入方向规则：端口 8080，授权对象 0.0.0.0/0
七、参考资料
《Web程序设计》，余元辉，清华大学出版社，2024.8
《JSP设计》（第三版），Hans Bergsten主编，林琪、朱涛江翻译 O'Reilly Media,Inc 2017年