【JavaWeb程序设计】JSP编程II

目录

一、输入并运行下面的import_test.jsp页面

1.1 代码运行结果

1.2 修改编码之后的运行结果

二、errorPage属性和isErrorPage属性的使用

2.1 下面的hello.jsp页面执行时将抛出一个异常，它指定了错误处理页面为errorHandler.jsp。

2.1.2 运行截图

2.2 下面的errorHandler.jsp是错误处理页面。

2.2.1 运行截图

2.3 按下面方法修改hello.jsp页面，将请求参数值编码转换为汉字编码。

三、表单处理

3.1 编写表单页面regUser.jsp

3.2 表单提交到页面UserInfo.jsp，显示注册信息。

3.3 要求页面提交时使用javascript脚本对表单元素进行检查，如必填字段、邮件、电话的格式检查以及字段长度的检查等。注意中文的处理。

3.1.1 运行截图

3.1.2 regUser.jsp

（1）JS代码

（2） CSS代码

（3） HTML代码 

3.1.3 UserInfo.jsp

（1）CSS代码

（2）HTML代码 

一、输入并运行下面的import_test.jsp页面

<%@ page import="java.util.Date,java.text.DateFormat" %><html><head><title>page指令示例</title></head><body><h3 align="center">使用page指令导入java.util.Date类</h3><% Date date = new Date();String s = DateFormat.getDateInstance().format(date);String s2 = DateFormat.getDateInstance(DateFormat.FULL).format(date);%><p align="center">现在的时间是：<%=s%><p align="center">现在的时间是：<%=s2%></body></html>

访问上述JSP页面，输出结果如下图所示

图1 import_test.jsp页面的运行结果

可以看到页面中最后一行的中文显示为乱码，将下面代码加到JSP页面中：

<%@ page contentType="text/html;charset=UTF-8" %>

重新访问页面，中文显示正常。这说明可以使用page指令的contentType属性指定页面输出使用的字符编码。默认情况下，JSP页面使用的字符集是iso-8859-1编码，如使用汉字编码应指定为 UTF-8 或 其他支持中文的字符集 。

1.1 代码运行结果

1.2 修改编码之后的运行结果

二、errorPage属性和isErrorPage属性的使用

2.1 下面的hello.jsp页面执行时将抛出一个异常，它指定了错误处理页面为errorHandler.jsp。

<%@ page contentType="text/html;charset=gb2312" %><%@ page errorPage="errorHandler.jsp" %><html><body><%String name = request.getParameter("name");if (name == null){throw new RuntimeException("没有指定name 属性。");}%>Hello, <%= name %></body></html>

2.1.2 运行截图

2.2 下面的errorHandler.jsp是错误处理页面。

<%@ page contentType="text/html; charset=gb2312" %><%@ page isErrorPage="true" %><html><body>请求不能被处理：<%=exception.getMessage()%><br>请重试！</body></html>

用下面的URL访问hello.jsp页面，就会产生下面结果：

  http://localhost:8080/bookstore/hello.jsp

图6.3 errorHandler.jsp页面的运行结果

这说明没有提供name参数，hello.jsp页面中抛出RuntimeException异常，所以调用错误页面。

如果使用下面URL访问hello.jsp页面，将产生下面正常的页面：

  http://localhost:8080/bookstore/hello.jsp?name=Mary

图6.4 hello.jsp页面的运行结果

2.2.1 运行截图

注意：如果请求参数值使用汉字，仍然产生乱码，例如：

  http://localhost:8080/bookstore/hello.jsp?name=欧阳清风

这是因为请求参数默认使用iso-8859-1编码传递，如果要正确显示中文，应将请求参数编码转换为gb2312编码。

由于我的Tomcat服务器是在8.0以上，编码为UTF-8，所以我这边显示中文的时候并不会出现乱码。

2.3 按下面方法修改hello.jsp页面，将请求参数值编码转换为汉字编码。

<%@ page contentType="text/html;charset=gb2312" %><%@ page errorPage="errorHandler.jsp" %><html><body><%String name = request.getParameter("name");if (name==null){throw new RuntimeException("没有指定name 属性。");}else{// 将字符串name的字符编码转换为汉字编码name = new String(name.getBytes("iso-8859-1"),"gb2312");}%>Hello, <%=name %></body></html>

此时，还会出现中文乱码吗，应如何处理？

由于浏览器对中文编码，所以依旧会出现中文乱码。（这里看不懂可以看我上一篇博客）

解决办法：添加下列代码

修改之后再次运行，成功显示中文。 

三、表单处理

3.1 编写表单页面regUser.jsp

3.2 表单提交到页面UserInfo.jsp，显示注册信息。

3.3 要求页面提交时使用javascript脚本对表单元素进行检查，如必填字段、邮件、电话的格式检查以及字段长度的检查等。注意中文的处理。

3.1.1 运行截图

由于保护个人隐私，部分信息会打马赛克

（1）*必填未填写完整提交表单

（2）密码格式错误

（3）两次输入的密码不一致

（4）*必填填完提交表单

        成功提交表单 

（5）邮箱格式/手机格式错误

无法提交表单

 （6）正确输入

提交的表单信息：没有获取密码！！

【备注】代码中引用的jquery：

3.1.2 regUser.jsp

（1）JS代码
<script type="text/javascript" src="../../JS/jquery-3.4.1.min.js"></script><script>/*************************格式检查*******************************/// 密码：6-12位var passwordPattern = /^[A-Za-z0-9]{6,12}$/;// 邮箱var emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;// 手机号：11位数字var phonePattern = /^\d{11}$/;//自定义函数:设置错误信息元素的文本内容和样式类function setErrorElement(errorElement, text, removeClass, addClass) {errorElement.text(text); //要设置的文本内容errorElement.removeClass(removeClass); // 要移除的样式类errorElement.addClass(addClass); // 要添加的样式类}//获取输入框的值并设置错误信息的相关元素function validateField(input, isRequired, isSubmit) {var value = input.value.trim(); //获取了输入框的值，并使用trim()方法去除前后的空白字符var errorId = input.id + "-errorMessage";//根据输入框的id生成对应的错误信息元素的idvar errorElement = $("#" + errorId);//使用jQuery选择器通过错误信息元素的id获取对应的元素，并将其赋值给变量errorElement//清除之前的错误信息errorElement.text("");//对输入框的值进行判空处理if (value === "") {//如果是必填字段if (isRequired === true) {//在表单提交时验证if (isSubmit) {setErrorElement(errorElement, "该字段不能为空!!", "success-message", "error-message");return false; //验证不通过，阻止表单提交} else {//失去焦点时验证setErrorElement(errorElement, "*必填", "success-message", "error-message");return true; //验证通过，可以稍后再填}} else {//如果不是必填字段，则验证通过return true;}}//格式检查，如果没有按要求输入，则给出相应的提示switch (input.id) {case "password": //1. 密码if (!passwordPattern.test(value)) {setErrorElement(errorElement, "请输入6-12位数字或字母!", "success-message", "error-message");return false;}break;case "confirmPwd": //2. 第二次输入的密码// 判断两次输入的密码是否一致var password = $("#password").val();if (value !== password) {setErrorElement(errorElement, "两次输入的密码不一致!", "success-message", "error-message");return false;}break;case "phone":   //3. 手机if (!phonePattern.test(value)) {setErrorElement(errorElement, "请输入11位数字!", "success-message", "error-message");return false;}break;case "email":  //4. 邮箱if (!emailPattern.test(value)) {setErrorElement(errorElement, "邮箱格式错误!", "success-message", "error-message");return false;}break;}//按要求输入的话，输入框后打√setErrorElement(errorElement, "✔", "error-message", "success-message")return true;}/*************************最终验证****************************/function validateForm() {//验证输入框的值：先获取各字段的id,再判断该输入框是否必填，最后是表单提交的验证。var flag0 = validateField(document.getElementById("username"), true, true);// var flag0 = validateField($("#username").object, true);var flag1 = validateField(document.getElementById("password"), true, true);var flag2 = validateField(document.getElementById("confirmPwd"), true, true);var flag3 = validateField(document.getElementById("realName"), true, true);var flag4 = validateField(document.getElementById("email"), false, true);var flag5 = validateField(document.getElementById("phone"), false, true);if (flag0 === true && flag1 === true && flag2 === true && flag3 === true && flag4 === true && flag5 === true) {return true;} else {return false;}}$(document).ready(function () {$('#regForm').submit(function () {return validateForm();});});</script>
（2） CSS代码
  <style>body {display: flex;justify-content: center;}#form-container {display: flex;justify-content: center;}.redText {color: red;}.pinkTest {color: deeppink;}.error-message {color: red;}.success-message {color: green;}.address-contain {width: 250px;height: 80px;}</style>
（3） HTML代码 
<%--Created by IntelliJ IDEA.User: 86189Date: 2023/10/9在必填字段和有格式要求字段的输入框旁边有一个红色文本用于显示输入错误信息。当字段失去焦点时，会触发相应的验证函数进行格式检查，并在错误信息文本中显示相应的提示。表单提交时调用validateForm()函数进行最终验证，如果所有字段都通过了格式检查，则允许表单提交。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><meta charset="UTF-8"><title>新用户注册</title></head>
<body>
<div id="form-container"><form action="UserInfo.jsp" onsubmit="return validateForm()" method="post"><table width="600px"><h1 align="center" class="pinkTest">新用户注册</h1>
<%--------------------------输入用户名------------------------------%><tr><td align="left" width="150px">用户名:</td><td align="left"><input type="text" id="username" name="username" onblur="validateField(this,true,false)"><span class="redText" id="username-errorMessage">*必填</span></td></tr>
<%---------------------------输入密码-------------------------------%><tr><td>用户密码:</td><td><input type="password" id="password" name="password" onblur="validateField(this,true,false)"><span class="redText" id="password-errorMessage">*必填</span></td></tr>
<%--------------------------再次输入密码----------------------------%><tr><td>确认密码:</td><td><input type="password" id="confirmPwd" name="confirmPwd" onblur="validateField(this,true,false)"><span class="redText" id="confirmPwd-errorMessage">*必填</span></td></tr>
<%------------------------输入姓名-------------------------------%><tr><td>真实姓名:</td><td><input type="text" id="realName" name="realName" onblur="validateField(this,true,false)"><span class="redText" id="realName-errorMessage">*必填</span></td></tr>
<%--------------------------选择性别-----------------------------%><tr><td style="height: 60px">性别:</td><td><input type="radio" id="male" name="gender" value="男"> 男<input type="radio" id="female" name="gender" value="女"> 女</td></tr>
<%-----------------------选择出生日期-------------------------%><tr><td>出生日期:</td><td><input type="date" id="birthDate" name="birthDate" onblur="validateField(this,false,false)"></td></tr>
<%--------------------------输入邮件-------------------------%><tr><td>电子邮件:</td><td><input type="email" id="email" name="email" style="width: 300px;"onblur="validateField(this,false,false)"><span class="redText" id="email-errorMessage"></span></td></tr>
<%-------------------------输入联系电话-----------------------------%><tr><td>联系电话:</td><td><input type="tel" id="phone" name="phone" style="width: 300px;"onblur="validateField(this,false,false)"><span class="redText" id="phone-errorMessage"></span></td></tr>
<%-------------------------输入联系地址-----------------------------%><tr><td>联系地址:</td><td><textarea id="address" name="address" class="address-contain"onblur="validateField(this,false,false)"></textarea></td></tr>
<%--------------------------两个按钮------------------------------%><tr><td align="center"><input type="submit" value="提交"></td><td align="center"><input type="reset" value="重置"></td></tr></table></form>
</div>
</body>
</html>

3.1.3 UserInfo.jsp

（1）CSS代码
 <style>table {display: flex;justify-content: center;/*border: 1px black solid;*/}</style>
（2）HTML代码 
<%--Created by IntelliJ IDEA.User: 86189Date: 2023/10/9Time: 11:10显示注册信息
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 获取从注册页面传递过来的参数，除了密码 --%>
<%request.setCharacterEncoding("utf-8");String UN_WRITE = "未填写";String UN_CHOOSE = "未选择";String username = request.getParameter("username"); //必填String realName = request.getParameter("realName"); //必填String gender = request.getParameter("gender") == null ? UN_CHOOSE : request.getParameter("gender");String birthDate = request.getParameter("birthDate").equals("") ? UN_WRITE : request.getParameter("birthDate");String email = request.getParameter("email").equals("") ? UN_WRITE : request.getParameter("email");String phone = request.getParameter("phone").equals("") ? UN_WRITE : request.getParameter("phone");String address = request.getParameter("address").equals("") ? UN_WRITE : request.getParameter("address");
%>
<html>
<head><meta charset="UTF-8"><title>注册信息</title></head>
<body>
<div><h1 align="center">注册信息</h1></div>
<div><table><tr><td>用户名:</td><td><%= username %></td></tr><tr><td>真实姓名:</td><td><%= realName %></td></tr><tr><td>性别:</td><td><%= gender %></td></tr><tr><td>出生日期:</td><td><%= birthDate %></td></tr><tr><td>电子邮件:</td><td><%= email %></td></tr><tr><td>联系电话:</td><td><%= phone %></td></tr><tr><td>联系地址:</td><td><%= address %></td></tr></table>
</div>
</body>
</html>

四、心得体会

1. 除了学习掌握基本的语法和表单处理，我还学会了JSP的指令和动作，特别是page指令的属性。通过设置<%@ page contentType="..." %>和<%@ page pageEncoding="..." %>属性，我可以指定响应的内容类型和页面的字符编码，确保正确的数据传输和显示。此外，我还学习了如何处理错误页面和设置当前页面为错误页面，以及如何使用其他指令和动作来增强JSP页面的功能。

2. 学会用JS进行表单验证，如：

（1）对输入框进行格式检查：在输入框失去焦点时，会触发相应的验证函数进行格式检查，并在错误信息文本中显示相应的提示。例如，密码必须是6-12位的数字或字母，手机号码必须是11位数字等。

（2）设置错误信息元素的文本内容和样式类：自定义了一个函数setErrorElement，用于设置错误信息元素的文本内容和样式类。

（3）尝试使用jQuery库，以便简化DOM操作。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/867219.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

医疗器械FDA | FDA如何对医疗器械网络安全认证进行审查？

医疗器械FDA | FDA如何对医疗器械网络安全认证进行审查？

FDA医械网络安全文件出具​https://link.zhihu.com/?targethttps%3A//www.wanyun.cn/Support%3Fshare%3D24315_ea8a0e47-b38d-4cd6-8ed1-9e7711a8ad5e FDA对医疗器械的网络安全认证进行审查时&#xff0c;主要关注以下几个方面&#xff0c;以确保医疗器械在网络环境中的安全性…
阅读更多...
2 极/2 零 （2P2Z） 补偿器

2 极/2 零 （2P2Z） 补偿器

极/2 零 &#xff08;2P2Z&#xff09; 补偿器是模拟 II 型控制器的数字实现。它是一种滤波器&#xff0c;通过考虑两个极点和一个零点&#xff0c;将特定的增益和相位升压引入系统。您必须战略性地选择每个极点和零点的频率位置&#xff0c;这将有助于实现所需的系统性能。在该…
阅读更多...
团队编程：提升代码质量与知识共享的利器

团队编程：提升代码质量与知识共享的利器

目录 前言1. 什么是团队编程&#xff1f;1.1 团队编程的起源1.2 团队编程的工作流程 2. 团队编程的优势2.1 提高代码质量2.2 促进知识共享2.3 增强团队协作2.4 提高开发效率 3. 团队编程的挑战3.1 开发成本较高3.2 需要良好的团队协作3.3 个人风格和习惯的差异3.4 长时间的集中…
阅读更多...
大数据期末复习——hadoop、hive等基础知识

大数据期末复习——hadoop、hive等基础知识

一、题型分析 1、Hadoop环境搭建 2、hadoop的三大组件 HDFS&#xff1a;NameNode&#xff0c;DataNode&#xff0c;SecondaryNameNode YARN&#xff1a;ResourceManager&#xff0c;NodeManager &#xff08;Yarn的工作原理&#xff09; MapReduce&#xff1a;Map&#xff0…
阅读更多...
七人互助拼团模式：共创共赢的电商新篇章

七人互助拼团模式：共创共赢的电商新篇章

在当今电商行业的繁荣浪潮中&#xff0c;七人互助拼团模式犹如一股清流&#xff0c;凭借其独特的激励机制与深厚的互助合作文化&#xff0c;赢得了消费者与商家的广泛赞誉。这一模式不仅重新定义了团购体验&#xff0c;更在无形中强化了社群间的联系与协作&#xff0c;共同绘制…
阅读更多...
中英双语介绍日本东京（Tokyo）

中英双语介绍日本东京（Tokyo）

中文版 东京介绍 东京是日本的首都&#xff0c;也是日本的政治、经济、文化和国际交流中心。以下是对东京的详细介绍&#xff0c;包括其地理位置、人口、经济、教育、文化和主要景点。 地理位置 东京位于日本关东地区的南部&#xff0c;地理坐标大致为北纬35度41分&#xf…
阅读更多...
C语言_练习题

C语言_练习题

求最小公倍数 思路&#xff1a;假设两个数&#xff0c;5和7&#xff0c;那么最小至少也要7吧&#xff0c;所以先假定最小公倍数是两个数之间较大的&#xff0c;然后看7能不能同时整除5和7&#xff0c;不能就加1继续除 int GetLCM(int _num1, int _num2) {int max _num1>_n…
阅读更多...
C++11中新特性介绍-之(二)

C++11中新特性介绍-之(二)

11.自动类型推导 (1) auto类型自动推导 auto自动推导变量的类型 auto并不代表某个实际的类型&#xff0c;只是一个类型声明的占位符 auto并不是万能的在任意场景下都能推导&#xff0c;使用auto声明的变量必须进行初始化&#xff0c;以让编译器推导出它的实际类型&#xff0c;…
阅读更多...
Python入门 2024/7/6

Python入门 2024/7/6

目录 数据容器入门 列表的定义语法 基本语法 嵌套列表 ​编辑 列表的下表索引 ​编辑 列表的常用操作 列表的常见方法 查找元素的下标 修改下标索引的值 插入元素 追加元素 追加一批元素 删除元素 删除某元素在列表中的第一个匹配项 清空列表内容 统计元素在…
阅读更多...
2024亚太杯中文赛数学建模B题完整论文讲解（含每一问python代码＋结果＋可视化图）

2024亚太杯中文赛数学建模B题完整论文讲解（含每一问python代码＋结果＋可视化图）

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题洪水灾害的数据分析与预测完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人…
阅读更多...
web服务之Nginx

web服务之Nginx

web服务之Nginx &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Li…
阅读更多...
将IConfiguration对象转换成一个具体的对象，以面向对象的方式来使用配置

将IConfiguration对象转换成一个具体的对象，以面向对象的方式来使用配置

我们倾向于将IConfiguration对象转换成一个具体的对象&#xff0c;以面向对象的方式来使用配置&#xff0c;我们将这个转换过程称为配置绑定。除了将配置树叶子节点配置节的绑定为某种标量对象外&#xff0c;我们还可以直接将一个配置节绑定为一个具有对应结构的符合对象。除此…
阅读更多...
【音视频 | RTSP】RTSP协议详解 及 抓包例子解析（详细而不赘述）

【音视频 | RTSP】RTSP协议详解 及 抓包例子解析（详细而不赘述）

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…
阅读更多...
华为开发者大会2024纪要：鸿蒙OS的全新篇章与AI大模型的革命

华为开发者大会2024纪要：鸿蒙OS的全新篇章与AI大模型的革命

华为开发者大会2024纪要：鸿蒙OS的全新篇章与AI大模型的革命 在科技的浪潮中，华为再次引领潮流，2024年的开发者大会带来了一系列令人瞩目的创新成果。从鸿蒙操作系统的全新Beta版到盘古大模型的震撼发布，华为正以前所未有的速度重塑智能生态。以下是本次大会的亮点，让我们…
阅读更多...
MUNIK解读ISO26262--系统架构

MUNIK解读ISO26262--系统架构

功能安全之系统阶段-系统架构 我们来浅析下功能安全系统阶段重要话题——“系统架构” 目录概览&#xff1a; 系统架构的作用系统架构类型系统架构层级的相关安全机制梳理 1.系统架构的作用 架构的思维包括抽象思维、分层思维、结构化思维和演化思维。通过将复杂系统分解…
阅读更多...
哨兵1SAR空间数据包协议数据单元文档（七）

哨兵1SAR空间数据包协议数据单元文档（七）

《哨兵1SAR空间数据包协议数据单元》文档对数据包的结构进行了详细描述&#xff0c;并提供了用户数据的格式和解码算法。 原文链接: 哨兵1SAR空间数据包协议数据单元文档英文版 同系列中的其他文章篇链接: 哨兵1SAR空间数据包协议数据单元文档&#xff08;一&#xff09; 哨兵…
阅读更多...
lodash-es 基本使用

lodash-es 基本使用

中文文档&#xff1a;https://www.lodashjs.com/ cloneDeep方法文档&#xff1a;https://www.lodashjs.com/docs/lodash.cloneDeep#_clonedeepvalue 参考掘金文章&#xff1a;https://juejin.cn/post/7354940462061715497 安装&#xff1a; pnpm install lodash-esnpm地址&a…
阅读更多...
Javase-异常

Javase-异常

文章目录 1. 异常概述2. 异常的继承结构3. 自定义异常4. 异常的处理5. 异常的使用6. finally语句块7. 方法覆盖与异常 1. 异常概述 什么是异常 ①什么是异常?有什么用? 1.Java中的异常是指程序运行时出现了错误或异常情况&#xff0c;导致程序无法继续正常执行的现象。例如&…
阅读更多...
谷粒商城 - 树形菜单递归流查询、三级分类数据查询性能优化、Jmter 性能压测

谷粒商城 - 树形菜单递归流查询、三级分类数据查询性能优化、Jmter 性能压测

目录 树形分类菜单&#xff08;递归查询&#xff0c;强扩展&#xff09; 1&#xff09;需求 2&#xff09;数据库表设计 3&#xff09;实现 4&#xff09;关于 asSequence 优化 性能压测 1&#xff09;Jmeter 安装使用说明 2&#xff09;中间件对性能的影响 三级分类数…
阅读更多...
【Kubernetes】Pod 资源调度之亲和性调度

【Kubernetes】Pod 资源调度之亲和性调度

Pod 资源调度之亲和性调度 1.Node 亲和性调度1.1 Node 硬亲和性1.2 Node 软亲和性 2.Pod 亲和性调度2.1 Pod 硬亲和2.2 Pod 软亲和2.3 Pod 反亲和 Kubernetes 的 默认调度器 以 预选、优选、选定机制 完成将每个新的 Pod 资源绑定至为其选出的目标节点上&#xff0c;不过&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023