网页设计与网站建设课程总结推广方式都有哪些
文章目录
- 一、实验目的
- 二、核心代码实现
- 三、调试关键问题
- 四、总结
一、实验目的
掌握JSP表单验证在服务器端的实现技术，实现对用户输入字符的非空及长度为5的验证，返回对应提示信息并优化用户交互。
二、核心代码实现
- 前端表单
<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实现页面加载时输入框自动聚焦
- 服务端验证
<%@ 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专注页面展示
用页面内的动态提示（如红色字体）替代弹窗，避免多次跳转影响体验