Web实验——基于JSP内置对象的服务器端表单验证
一、小组分工
本次实验功能简单，我们小组按模块快速分工：
余思盈：编写前端表单页面
庞希颖：编写 JSP 验证逻辑
赵玉娇：部署 Tomcat、功能测试
黄钰云：记录过程、撰写博客与报告
全程协作完成，没有复杂扯皮，直接高效开发。
二、最初构思
拿到需求我们很快确定方案：
- 做一个 HTML 表单，让用户输入字符串。
- 提交到 JSP 页面，在服务器端做验证。
- 用 JSP 内置对象request获取数据。
- 判断两条规则：不为空、长度必须为 5。
- 给出提示信息，清空输入框并自动聚焦。
思路很直接，就是 “表单提交→后台校验→结果回显”。
三、开发过程
- 项目结构
Maven Web 项目，页面统一放在src/main/webapp下：
index.html表单页面
check.jsp 处理与验证页面 - 前端表单页面（李四编写）
代码部分：
点击查看代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证结果</title>
</head>
<body>
<h2>验证结果</h2>
<%
// 获取表单输入值
String input = request.getParameter("inputStr");
String msg = "";
if (input == null || input.trim().equals("")) {
msg = "输入不能为空！";
} else if (input.length() != 5) {
msg = "必须输入5个字符！当前长度：" + input.length();
} else {
msg = "输入格式正确！您输入的是：" + input;
}
%>
<p style="color:red; font-size:16px"><%= msg %></p>
<%-- 不符合则返回表单页并自动聚焦输入框 --%>
<%
if (!input.equals("") && input.length() == 5) {
// 验证通过，不跳转
} else {
%>
<script>
alert("<%= msg %>");
window.location.href="index.html"; // 返回表单页
document.getElementById("inputStr").focus();
</script>
<%
}
%>
</body>
</html>
3.服务器端验证页面
代码部分：
点击查看代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证结果</title>
</head>
<body>
<h2>验证结果</h2>
<%
// 获取表单输入值
String input = request.getParameter("inputStr");
String msg = "";
if (input == null || input.trim().equals("")) {
msg = "输入不能为空！";
} else if (input.length() != 5) {
msg = "必须输入5个字符！当前长度：" + input.length();
} else {
msg = "输入格式正确！您输入的是：" + input;
}
%>
<p style="color:red; font-size:16px"><%= msg %></p>
<%-- 不符合则返回表单页并自动聚焦输入框 --%>
<%
if (!input.equals("") && input.length() == 5) {
// 验证通过，不跳转
} else {
%>
<script>
alert("<%= msg %>");
window.location.href="index.html"; // 返回表单页
document.getElementById("inputStr").focus();
</script>
<%
}
%>
</body>
</html>
-
部署与运行
项目添加到 Tomcat 8.0
启动服务器
浏览器访问：http://localhost:8080/Test_JSP_Form /form.html -
测试结果
空提交：提示 “输入不能为空”
长度不符：提示字符数量错误
输入 5 个字符：提示正确
每次返回自动清空、自动聚焦，符合实验要求
四、调试与问题
实验本身简单，只遇到两个小问题：
1.中文提示乱码：加一行request.setCharacterEncoding("UTF-8")解决。
2.一开始输入框 ID 写错，自动聚焦失效，修正后正常。
没有其他复杂 bug，顺利一次跑通。
五、每位成员简短收获
余思盈：完成表单页面，理解了 form 表单的 action、method 和参数传递。
庞希颖：写 JSP 验证逻辑，掌握了 request 内置对象的使用和服务器端校验。
赵玉娇：负责测试，确认三种场景都符合要求，体验了完整的部署 — 运行 — 测试流程。
黄钰云:整理文档与博客，把小组开发过程清晰记录下来。
六、小组总结
本次实验难度不高，但完整实践了前端提交、JSP 处理、服务器端验证的标准 Web 流程。
小组分工明确，开发顺畅，快速完成需求并通过测试。
通过实验，我们掌握了 JSP 内置对象的基本用法，也明白了服务器端验证的必要性。整体顺利，收获扎实。
浙公网安备 33010602011771号