在上一章中我们显示的效果如下所示：

上面后面都有错误的红色×的显示，这样是不对的，我们要解决该问题

我们要循环遍历每一个错误的信息，看它的内容有没有，如果有内容我们就显示错误的×，如果没有就不显示×

我们新建一个js文件来完成上面的操作：

然后在html中加载该regist.js文件

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>注册</title>

<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">

<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>

<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>

</head>

<body>

<div id="divMain">

<div id="divTitle"><span id="spanTitle">新用户注册</span></div>

<div id="divBoby"><table id="tableForm">

<tr>

<td class="tdText">用户名：</td>

<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>

<td class="tdError"><label class="errorClass" id="loginnameError">用户名不能为空</label></td>

</tr>

<tr>

<td class="tdText">登陆密码：</td>

<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>

<td class="tdError"><label class="errorClass" id="loginpassError"></label></td>

</tr>

<tr>

<td class="tdText">确认密码：</td>

<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>

<td class="tdError"><label class="errorClass" id="reloginrepassError"></label></td>

</tr>

<tr>

<td class="tdText">Email：</td>

<td class="tdInput"><input class="inputClass" type="password" name ="email" id="email"/></td>

<td class="tdError"><label class="errorClass" id="emailError"></label></td>

</tr>

<tr>

<td class="tdText">图形验证码：</td>

<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>

<td class="tdError"><label class="errorClass" id="verifyCodeError"></label></td>

</tr>

<tr>

<td class="tdText"></td>

<td class="tdInput"><div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div></td>

<td class="tdError"><label ><a href="">换一张</a></label></td>

</tr>

<tr>

<td class="tdText"></td>

<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>

<td class="tdError"><label></label></td>

</tr>

</table></div>

</div>

</body>

</html>

1、首先先加载jquery的js文件，再次加载我们建立的regist.js，我们的regist.js要使用jquery.js.所以我们先加载jquery.js,二者的顺利别写错了

我们来看regist.js的代码

//该函数在html文档加载完成之后会调用

$(function() {

    /*

     * 变量所有的错误信息，调用一个方法来决定是否显示错误信息

     * */

    $(".errorClass").each(function() {

        showError($(this));//$(this)表示当前遍历的对象

    });

});

//判断当前元素是否存在内容，存在显示，不存在不显示

function showError( ele ){

    var text = ele.text();//获得该对象的文本值

    if(!text){

        ele.css("display","none");//让该对象消息

    }else{

        ele.css("display","");//显示对象

    }

}

上面的都是jquery的函数操作，不清楚的看以前的博客

我们来看看程序运行的效果

JavaWeb网上图书商城完整项目--25.注册页面之隐藏没有内容的错误信息实现的更多相关文章

  1. JavaWeb网上图书商城完整项目--27.注册页面之注册按钮图片切换实现

    我们要实现立即注册这个按钮,光标获得焦点是一张图片,光标失去焦点的时候是另外一张图片 我们需要在文档加载完成之后,设置该事件hover事件 hover(over,out)这是jQuery的一个模仿悬停 ...

  2. JavaWeb网上图书商城完整项目--26.注册页面之验证码换一张实现

    我们现在要实现点击换一张的时候实现验证码的修改 我们首先在html添加函数点击事件: <%@ page language="java" contentType="t ...

  3. JavaWeb网上图书商城完整项目--24.注册页面的css样式实现

    现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...

  4. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  5. JavaWeb网上图书商城完整项目--day02-3.regist页面输入框失去焦点进行校验

    当输入框输入数据之后,当输入框失去焦点的时候,我们需要对输入的数据进行校验 l  用户名校验: 用户名不能为空: 用户名长度必须在3 ~ 20之间: 用户名已被注册(需要异步访问服务器). l  登录 ...

  6. JavaWeb网上图书商城完整项目--day02-2.regist页面输入框得到焦点隐藏label

    实现当光标输入在输入输入框的时候,将后面的内容隐藏,例如在用户名称输入信息的时候,后面的用户名不能为空隐藏 我们来看看regist.js的代码: //该函数在html文档加载完成之后会调用 $(fun ...

  7. JavaWeb网上图书商城完整项目--23.注册页面之html实现

    我们来分析下这个页面的代码如何实现: 我们来分下下层次结构: 1.首先最外层是一个大的div,然后又包括两个小的div,第一个div中包括一个span,第二个div是一个table表 我们来看程序的代 ...

  8. JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现

    1.当从服务器返回的注册错误信息的时候,我们在注册界面需要将错误信息显示出来 我们需要修改regist.jsp页面的代码:其中error是一个haspmap,c标签对map的属性可以直接使用 ${er ...

  9. JavaWeb网上图书商城完整项目--day02-21.退出功能的实现

    1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...

随机推荐

  1. php mysqli使用

    连接到数据库$mysqli = new mysqli(主机,用户,密码,数据库); 选择数据库$mysqli->select_db(数据库);设置编码$mysqli->set_charse ...

  2. Rocket - tilelink - BusWrapper

    https://mp.weixin.qq.com/s/03BvgTNQtD75Guco6gUGQg   简单介绍BusWrapper的实现.   1. HasTLBusParams   定义SoC的挂 ...

  3. IntelliJ IDEA连接不上数据库 （Connection to testdb@localhost failed. [08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up.）

    问题提示为: 原因:MySQL数据库版本为8.0以上,需要在URL加上时区,即加上?serverTimezone=GMT 成功后为:

  4. Java实现 LeetCode 564 寻找最近的回文数（今天要GG在这道题了 头晕+题难(((φ(◎ロ◎;)φ)))）

    564. 寻找最近的回文数 给定一个整数 n ,你需要找到与它最近的回文数(不包括自身). "最近的"定义为两个整数差的绝对值最小. 示例 1: 输入: "123&quo ...

  5. Java实现 LeetCode 378 有序矩阵中第K小的元素

    378. 有序矩阵中第K小的元素 给定一个 n x n 矩阵,其中每行和每列元素均按升序排序,找到矩阵中第k小的元素. 请注意,它是排序后的第k小元素,而不是第k个元素. 示例: matrix = [ ...

  6. Java实现 LeetCode 198 打家劫舍

    198. 打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报 ...

  7. java实现连续数的公倍数

    为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并非纯粹的偶然:60是个优秀的数字,它的因子比较多. 事实上,它是1至6的每个数字的倍数.即1,2,3,4,5,6都是可以除尽6 ...

  8. Java实现 蓝桥杯 历届试题 危险系数

    问题描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我们来定义一个危险系数DF( ...

  9. java实现第六届蓝桥杯隔行变色

    隔行变色 隔行变色 Excel表的格子很多,为了避免把某行的数据和相邻行混淆,可以采用隔行变色的样式. 小明设计的样式为:第1行蓝色,第2行白色,第3行蓝色,第4行白色,- 现在小明想知道,从第21行 ...

  10. CMAKE工具学习

    最近在学习各大物联网平台的SDK包,发现其工程都使用了一种叫cmake的工具在管理代码.于是花了一天时间简单学习了解了cmake工具,其目的是让自己能读懂使用该工具管理的代码,并能简单使用该工具管理我 ...