当前位置：首页 > news >正文

基于JSP内置对象的服务器端表单验证

news 2026/5/8 17:03:29

实验五：基于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") 接收参数