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

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

news 2026/5/9 0:08:02

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

一、项目背景

在Web开发中，表单验证是最基础也是最重要的功能之一。

很多初学者在学习Web开发时，往往只关注前端页面效果，却忽略了服务器端验证的重要性。而实际上，仅依赖JavaScript前端验证是不安全的，因为用户可以绕过前端直接向服务器发送请求。

因此，本实验重点学习：

JSP页面开发
JSP内置对象使用
服务器端表单验证
request对象获取客户端数据
Web请求与响应流程

本实验通过一个简单的“字符长度验证”案例，理解服务器端验证的完整实现过程。

二、实验要求分析

实验要求如下：

页面包含一个文本输入框
用户可以输入任意字符
点击“判断”按钮提交
服务器端验证：
- 输入不能为空
- 输入字符长度必须为5
若输入错误：
- 返回错误提示
- 清空输入框
- 自动获取输入焦点
若输入正确：
- 提示“输入格式正确”

三、技术路线分析

本实验采用：

技术	作用
HTML	页面结构
CSS	页面美化
JSP	动态页面开发
Java	数据验证逻辑
Tomcat	Web服务器

四、项目结构设计

项目结构如下：

WebContent
│
├── index.jsp
├── check.jsp
└── css└── style.css

五、系统实现思路

整个系统的执行流程如下：

用户输入内容↓
点击提交按钮↓
表单提交到check.jsp↓
服务器获取数据↓
进行服务器端验证↓
返回验证结果

六、页面设计实现

1. 创建输入页面 index.jsp

index.jsp 主要负责：

显示输入框
提供提交按钮
将数据提交到服务器

2. 页面核心代码

<form action="check.jsp" method="post"><input type="text"name="username"placeholder="请输入5个字符"autofocus><br><br><input type="submit" value="判断"></form>

3. 代码分析

（1）form标签

<form action="check.jsp" method="post">

作用：

action：指定提交目标页面
method：指定提交方式

这里使用 POST 提交。

（2）input输入框

<input type="text" name="username">

作用：

用户输入数据
name属性用于服务器获取数据

（3）autofocus属性

autofocus

作用：

页面加载后自动获取焦点，提高用户体验。

七、服务器端验证实现

服务器端验证是本实验的核心部分。

相比客户端验证：

更安全
无法绕过
更可靠

八、获取用户输入

在 check.jsp 中：

String username = request.getParameter("username");

代码解析

request对象

request 是 JSP 内置对象之一。

作用：

获取客户端请求数据
获取表单参数
获取请求头信息

getParameter()

request.getParameter("username")

作用：

获取 name="username" 输入框中的内容。

九、空值验证

首先需要判断输入是否为空。

代码如下：

if(username == null || username.trim().equals(""))

代码解析

（1）username == null

判断是否为空对象。

（2）trim()

trim()

作用：

去除字符串前后空格。

例如：

" abc "

处理后：

"abc"

（3）equals("")

判断是否为空字符串。

十、长度验证

实验要求：

字符长度必须等于5。

实现代码：

else if(username.length() != 5)

为什么必须先判空？

因为：

null.length()

会产生：

NullPointerException

因此必须：

先判空
再判断长度

这是Java开发中的重要思想。

十一、正确输入处理

当输入合法时：

<div class="success">输入格式正确！
</div>

成功结果展示

同时输出用户输入内容：

<%=username %>

JSP表达式

<%= %>

作用：

将Java变量输出到HTML页面。

例如：

<%=username %>

最终会显示：

abcde

十二、CSS页面美化

为了提高页面视觉效果，本实验加入了CSS美化。

主要实现：

渐变背景
卡片式布局
圆角按钮
阴影效果
Hover动画

十三、核心CSS分析

1. 页面居中

display:flex;
justify-content:center;
align-items:center;

作用：

实现水平垂直居中。

2. 卡片阴影

box-shadow:0 8px 20px rgba(0,0,0,0.2);

作用：

增加立体感。

3. 渐变背景

background:linear-gradient(135deg,#74ebd5,#9face6);

作用：

提高页面美观度。

十四、项目运行流程分析

整个项目的执行流程：

index.jsp↓
用户输入数据↓
提交到check.jsp↓
request获取参数↓
服务器验证↓
返回结果页面

十五、实验中遇到的问题

1. 中文乱码问题

问题：

中文显示乱码。

解决：

加入：

request.setCharacterEncoding("UTF-8");

同时页面设置：

pageEncoding="UTF-8"

2. 获取不到参数

原因：

name属性错误。

解决：

确保：

name="username"

与：

request.getParameter("username")

一致。

十六、实验总结

通过本次实验，我进一步理解了：

JSP页面开发流程
表单数据提交机制
request对象的使用
服务器端验证思想
Web开发中的安全性问题

同时也掌握了：

HTML表单设计
JSP动态页面开发
Java字符串处理
CSS页面美化

十七、服务器端验证的重要性

很多初学者认为：

JavaScript验证已经足够。

但实际上：

前端验证可以被绕过。

例如：

用户可以：

关闭JavaScript
使用抓包工具
直接发送HTTP请求

因此：

真正安全的数据验证必须在服务器端完成。

十八、项目可扩展方向

本实验还可以继续扩展：

1. 用户注册系统

增加：

用户名
密码
邮箱

2. 数据库存储

结合：

MySQL
JDBC

实现数据持久化。

3. MVC架构

使用：

Servlet
JSP
JavaBean

实现MVC开发模式。

4. 前后端双重验证

同时加入：

JavaScript验证
JSP服务器验证

提高用户体验与安全性。

十九、完整项目源码

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP服务器端表单验证</title><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><h1>服务器端表单验证</h1><form action="check.jsp" method="post"><input type="text" name="username"id="username"placeholder="请输入5个字符"autofocus><br><br><input type="submit" value="判断"></form></div></body>
</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><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><h1>验证结果</h1><%request.setCharacterEncoding("UTF-8");String username = request.getParameter("username");if(username == null || username.trim().equals("")){%><div class="error">
输入不能为空！
</div><%}
else if(username.length() != 5){%><div class="error">
输入字符必须为5个！
</div><%}
else{%><div class="success">
输入格式正确！
</div><br><div class="result">
你输入的内容是：
<%=username %>
</div><%}%></div></body>
</html>

style.css

*{margin:0;padding:0;box-sizing:border-box;
}body{font-family:"Microsoft YaHei";background:linear-gradient(135deg,#74ebd5,#9face6);height:100vh;display:flex;justify-content:center;align-items:center;
}.container{width:420px;background:white;padding:40px;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,0.2);text-align:center;
}h1{margin-bottom:30px;color:#333;
}input[type=text]{width:100%;padding:12px;border:2px solid #ccc;border-radius:8px;font-size:16px;
}input[type=submit]{width:100%;padding:12px;border:none;border-radius:8px;background:#667eea;color:white;font-size:16px;cursor:pointer;
}.error{color:#e53e3e;font-size:20px;font-weight:bold;
}.success{color:#38a169;font-size:20px;font-weight:bold;
}