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

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

实验概述

本次实验，我们小组的目标是设计并实现一个基于JSP内置对象的服务器端表单验证网页。实验的核心目的在于熟练掌握JSP内置对象的使用方法，编写包含表单的HTML文档。表单中可以输入任意字符（单行文本输入框）。要求能判断输入不能为空且字符必须为5个，输入完毕单击“判断”（提交输入按钮）按钮，发送到服务器端完成审查验证，如果用户的输入不符合要求则返回具体的提示信息，同时清空文本框内容并激活文本框输入焦点。如果正确返回输入格式正确的提示信息。

实现方法分析

本次实验采用双JSP页面结构，分别为展示页面与逻辑处理页面，结构简单清晰，符合基础JavaWeb开发流程。本次实验全部采用JSP格式编写，统一文件后缀，方便项目管理与代码调试。

前端页面实现：
使用HTML表单标签搭建输入界面，搭配CSS样式完成页面美化，采用居中布局，界面简洁干净。为错误输入添加黑色边框高亮提示，区分是否成功与失败，提高用户交互体验。
后台逻辑处理：
本次实验核心采用纯JSP完成服务器端校验，无需Servlet。前端表单以POST方式提交数据至validate.jsp，后台使用request内置对象获取表单参数。对输入内容进行空值判断、长度判断，封装提示信息、样式类名、聚焦标记，通过请求转发跳转回原页面，实现数据回显与动态提示效果。

关键技术点

全站JSP统一格式：
本次实验所有页面均为JSP文件，JSP兼容静态页面代码，同时支持Java脚本片段，结构简洁规范，适合基础Web实验开发。
JSP内置对象request：
使用request.getParameter()获取前端表单数据，使用setAttribute()存入数据，实现页面之间数据传递。
请求转发技术：
采用request.getRequestDispatcher()实现服务器内部转发，地址栏不发生改变，保持页面统一性。
服务器端表单验证：
在后端判断输入是否为空、字符长度是否合规，相比于前端验证安全性更高，防止前端代码被绕过。
JS动态聚焦：
利用Java代码控制JS执行，验证失败时自动激活输入框焦点，优化用户操作体验。

实验成果

结果介绍

本次实验成功实现服务器端表单校验功能，项目结构简单清晰，运行流畅，主要实现功能如下：

页面美观布局：采用居中卡片样式，按钮、输入框美化，简洁高级。
输入为空校验：未输入内容直接提交，提示输入不能为空，输入框标黑并自动聚焦。
字符长度校验：输入字符不等于5位时，提示长度错误，标注当前字符长度。
格式正确提示：严格输入5个字符，页面绿色字体提示验证成功。

网站访问链接：http://47.111.183.105:8080/homework/test5/validate.jsp

代码分析

form.jsp

点击查看代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSP表单验证 - 前端页面</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .form-container {
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h3 {
            margin-top: 0;
            text-align: center;
            color: #333;
        }
        .input-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
        }
        #inputStr {
            width: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .submit-btn {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .submit-btn:hover {
            background-color: #0056b3;
        }
        .input-error {
            border: 2px solid red !important;
        }

        /* 错误提示文字红色 */
        .error {
            color: red;
            text-align: center;
            font-size: 15px;
        }

        /* 成功提示文字绿色 */
        .success {
            color: green;
            text-align: center;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h3>JSP服务器端表单验证</h3>
        <!-- 表单设置：post方式提交到validate.jsp(可根据后续做出来的文件更改) -->
        <form action="validate.jsp" method="post">
            <div class="input-group">
                <label for="inputStr">请输入5个字符：</label>
                <!-- 输入框设置id为inputStr，方便后续JS聚焦 -->
                <input type="text" id="inputStr" name="inputStr" placeholder="请输入任意5个字符">
            </div>
            <button type="submit" class="submit-btn">判断</button>
        </form>
        <%
            String result = (String)request.getAttribute("result");
            String inputClass = (String)request.getAttribute("inputClass");
            if (result != null && !result.isEmpty()) {
        %>
            <p class="<%= "input-error".equals(inputClass) ? "error" : "success" %>">
                <%= result %>
            </p>
        <% } %>
         <script>
            <% 
         boolean needFocus = Boolean.TRUE.equals(request.getAttribute("needFocus"));
            if (needFocus) {
            %>
                // 页面加载完自动聚焦到输入框
                window.onload = function() {
                    document.getElementById("inputStr").focus();
                };
            <%
            }
            %>
        </script>
    </div>
    
</body>
</html>

validate.jsp

点击查看代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("utf-8");
    String inputStr = request.getParameter("inputStr");
    String result = "";
    String inputClass = "";
    boolean needFocus = false;

    if (inputStr != null) {
        inputStr = inputStr.trim();
        if (inputStr.isEmpty()) {
            result = "输入不能为空！";
            inputClass = "input-error";
            needFocus = true;
        } else if (inputStr.length() != 5) {
            result = "必须输入5个字符！当前长度：" + inputStr.length();
            inputClass = "input-error";
            needFocus = true;
        } else {
            result = "验证成功！格式正确";
            inputClass = "";
            needFocus = false;
        }
    }

    request.setAttribute("result", result);
    request.setAttribute("inputClass", inputClass);
    request.setAttribute("needFocus", needFocus);
    
    request.getRequestDispatcher("form.jsp").forward(request, response);
%>

调试过程与问题解决

问题一：输入错误后无法自动聚焦

现象：
输入格式错误，输入框不会自动激活光标。
分析与解决：
定义布尔标记needFocus，后台判断是否需要聚焦，配合Java脚本嵌入JS代码，页面加载自动触发聚焦事件。

问题二：输入空格判定为合法字符

现象：
输入空格也会判定为字符，不符合校验逻辑。
分析与解决：
使用trim()方法去除首尾空格，剔除无效空白字符，严格判断用户真实输入内容。

实验心得

本次实验完成了基于JSP内置对象的服务器端表单验证开发，全程使用JSP文件编写，进一步巩固了JSP基础语法。在实验过程中，我们小组分工明确，有人负责前端美化，有人负责后台逻辑，共同调试优化代码，提升了团队协作能力与代码排错能力。
本次实验让我明白后端校验的重要性，理解了JSP动态网页运行原理，为今后学习Servlet、数据库交互、前后端开发打下了扎实的基础。

posted @ 2026-05-10 15:17 呼儿嘿哟。阅读(12) 评论(0) 收藏举报

刷新页面返回顶部

cairuiyan

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

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

实验概述

实现方法分析

关键技术点

实验成果

结果介绍

代码分析

form.jsp

validate.jsp

调试过程与问题解决

问题一：输入错误后无法自动聚焦

问题二：输入空格判定为合法字符

实验心得

公告