【服务器端表单字符验证】

文章目录

一、实验目的

掌握JSP表单验证在服务器端的实现技术，实现对用户输入字符的非空及长度为5的验证，返回对应提示信息并优化用户交互。

二、核心代码实现

前端表单

html 复制代码

<form action="validate.jsp" method="post"> 
  <table align="center">
    <tr><td><h1>请输入任意字符（5个）：</h1></td></tr>
    <tr><td>
      <input type="text" id="input" name="input"> 
      <input type="submit" value="判断">
    </td></tr>
  </table>  
  <script>document.getElementById("input").focus();</script>
</form>

表单提交至validate.jsp，name="input"需与后端参数名一致
JavaScript实现页面加载时输入框自动聚焦

服务端验证

jsp 复制代码

<%@ page contentType="text/html; charset=UTF-8" %>
<%
request.setCharacterEncoding("utf-8");
String input = request.getParameter("input");
int length = (input != null) ? input.length() : 0;

if (length == 0) { %>
  <script>alert("输入不能为空！"); window.location.href = "index.html";</script>
<% } else if (length != 5) { %>
  <script>alert("输入字符数目不为5！"); window.location.href = "index.html";</script>
<% } else { %>
  <script>alert("输入格式正确！"); window.location.href = "index.html";</script>
<% } %>

处理中文乱码：request.setCharacterEncoding("utf-8")
空值保护：避免null指针异常，先判断输入是否存在再获取长度

三、调试关键问题

中文乱码
- 原因：未统一请求与页面编码
- 解决：JSP顶部添加charset=UTF-8，并设置请求编码
空输入报错
- 原因：未处理用户直接提交空表单的情况
- 解决：增加input != null判断，默认长度为0
交互优化
- 输入不符合要求时，跳转回表单页面并自动聚焦输入框，方便重新输入

四、总结

实验结果展示

登录界面。

输入正确的话会提示"输入格式正确"
空输入的话，会提示"输入不能为空"，返回后输入框清空并聚焦

输入的字符数错误会提示"输入字符数目不为5"，返回后输入框重置

这次实验让我真正理解了 "Web 开发无小事"------ 哪怕是一个简单的表单验证，也需要考虑编码、交互、安全、异常处理等多个维度。从表单搭建到服务端逻辑实现，再到调试优化，完整经历了Web开发中表单验证的全流程。深刻体会到后端验证在数据合法性校验中的关键作用，也对前后端交互细节有了更直观的认识。
遇到的困难：
漏掉name属性导致后端获取不到数据；
未处理空输入导致程序崩溃。键
改进方向
后续可增加前端实时字符长度提示，减少无效提交
尝试用Servlet分离业务逻辑，使JSP专注页面展示
用页面内的动态提示（如红色字体）替代弹窗，避免多次跳转影响体验