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

一、实验目的

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

二、核心代码实现

1. 前端表单

<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实现页面加载时输入框自动聚焦

2. 服务端验证

<%@ 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指针异常，先判断输入是否存在再获取长度

三、调试关键问题

1. 中文乱码

   • 原因：未统一请求与页面编码
   • 解决：JSP顶部添加charset=UTF-8，并设置请求编码

2. 空输入报错

   • 原因：未处理用户直接提交空表单的情况
   • 解决：增加input != null判断，默认长度为0

3. 交互优化

   • 输入不符合要求时，跳转回表单页面并自动聚焦输入框，方便重新输入

四、总结

• 实验结果展示

登录界面。

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

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

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