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

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

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

我们新建一个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. Robot Framework（15）- 扩展关键字

    如果你还想从头学起Robot Framework,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1770899.html 前言 什么是扩展 ...

  2. 运用惰性删除和定时删除实现可过期的localStorage缓存

    localStorage简介 使用localStorage可以在浏览器中存储键值对的数据.经常被和localStorage一并提及的是sessionStorage,它们都可以在当浏览器中存储键值对的数 ...

  3. oeong.xyz

    兴趣使然而搭的小破站:oeong.xyz

  4. Rocket - tilelink - Fuzzer

    https://mp.weixin.qq.com/s/hAKpZHy0IU6_XEvctfkHOA   简单介绍Fuzzer的实现.   ​​   1. IDMapGenerator   功能类似于I ...

  5. Rocket - tilelink - ErrorEvaluator

    https://mp.weixin.qq.com/s/NkbW465NAmhDsETksd2M0g   介绍ErrorEvaluator的实现.   ​​   1. 基本介绍   ErrorEvalu ...

  6. Rocket - 断句 - Diplomatic Design Patterns: A TileLink Case Study

    https://mp.weixin.qq.com/s/afRVgTCYs1Mxu898uSmVaQ 整理一篇介绍Diplomacy和TileLink的文章.   原文链接: https://carrv ...

  7. C#中值类型，引用类型，字符串类型的区别（内存图解）

    如果用图片来解释值类型,引用类型和字符串类型(引用类型的一种)的区别的话 值类型: 引用类型: string类型:

  8. WebServer远程部署

    通过远程部署获取webshell并不属于代码层次的漏洞,而是属于配置性错误漏洞. 1.Tomcat tomcat是一个jsp/Servlet容器 端口号:8080 攻击方法: 默认口令.弱口令,爆破, ...

  9. 使用ADMT和PES实现window AD账户跨域迁移-介绍篇

    使用 ADMT 和 pwdmig 实现 window AD 账户跨域迁移系列: 介绍篇 ADMT 安装 PES 的安装 ADMT:迁移组 ADMT:迁移用户 ADMT:计算机迁移 ADMT:报告生成 ...

  10. Java实现 LeetCode 749 隔离病毒（DFS嵌套）

    749. 隔离病毒 病毒扩散得很快,现在你的任务是尽可能地通过安装防火墙来隔离病毒. 假设世界由二维矩阵组成,0 表示该区域未感染病毒,而 1 表示该区域已感染病毒.可以在任意 2 个四方向相邻单元之 ...