我们现在要实现点击换一张的时候实现验证码的修改

我们首先在html添加函数点击事件：

<%@ 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="javascript:changeVerifyCode()">换一张</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>
<a href="javascript:changeVerifyCode()"表示调用changeVerifyCode()函数

我们在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","");//显示对象

    }

}

//实现验证码图片的切换功能

function changeVerifyCode() {

    $("#imgVerifyCode").attr("src","/goods/VerifyCodeServlet?a="+new Date().getTime());

}

不清楚的看jquery函数的使用

JavaWeb网上图书商城完整项目--26.注册页面之验证码换一张实现的更多相关文章

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

    在上一章中我们显示的效果如下所示: 上面后面都有错误的红色×的显示,这样是不对的,我们要解决该问题 我们要循环遍历每一个错误的信息,看它的内容有没有,如果有内容我们就显示错误的×,如果没有就不显示× ...

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

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

  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网上图书商城完整项目--23.注册页面之html实现

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

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

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

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

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

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

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

  9. JavaWeb网上图书商城完整项目--day02-20.修改密码各层实现

    1.我们来看看后台操作的业务流程 每一层都按照上面的步骤来进行实现: 这里我们要使用commUtils.toBean把表单提交的参数封装成User对象,必须保证User对象中的字段和表单提交的字段的名 ...

随机推荐

  1. [FlashDevelop] 002.FlashDevelop + LayaFlash播放SWF并转成HTML5

    在上一个教程中,我讲解了如何搭建FLashDevelop环境,并创建了Hello的小Demo.那么接下来,我们来看看如何实现播放swf文件,并将其转成可以在浏览器上播放的HTML5文件.那么首先我们得 ...

  2. 二维DCT变换 | Python实现

    引言 最近专业课在学信息隐藏与数字水印,上到了变换域隐藏技术,提到了其中的DCT变换,遂布置了一个巨烦人的作业,让手动给两个\(8\times8\)的矩阵做二维DCT变换,在苦逼的算了一小时后,我决定 ...

  3. 分布式项目开发-springmvc.xmll基础配置

    基础步骤: 1 包扫描 2 驱动开发 3 视图解析器 4 文件上传解析器 5 拦截器 6 静态资源 <beans xmlns="http://www.springframework.o ...

  4. vnc下载 vnc下载-安装-登录教程（超详细！）

    许多人在服务器下载了vnc服务端却不知道使用.下面我来教你使用方法 本次教程使用的工具:iis7服务器管理 一.首先,用iis7服务器管理工具登录需要下载vnc服务端的服务器,完成下载. 1.iis7 ...

  5. footer部分，当页面主题内容不满一屏时，始终位于页面底部

    比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...

  6. Mybatis缓存及延迟加载策略

    一:引言 通过前面几篇的文章介绍了Mybatis的一对一.一对多.多对多关系的配置及实现,可是大家发现了吗?在执行关联查询的时候,直接会把当前查询的主表里包含的副表也查询后封装到对象里,其实在实际开发 ...

  7. 一个Jmeter模拟上传文件接口的实例

    资料参考:https://blog.csdn.net/u010390063/article/details/78329373 项目中,避免不了要用到很多上传文件.图片的接口,那么碰到这类接口该如何进行 ...

  8. tensorflow2.0学习笔记

    今天我们开始学习tensorflow2.0,用一种简单和循循渐进的方式,带领大家亲身体验深度学习.学习的目录如下图所示: 1.简单的神经网络学习过程 1.1张量生成 1.2常用函数 1.3鸢尾花数据读 ...

  9. Python + MySQL 批量查询百度收录

    做SEO的同学,经常会遇到几百或几千个站点,然后对于收录情况去做分析的情况 那么多余常用的一些工具在面对几千个站点需要去做收录分析的时候,那么就显得不是很合适. 在此特意分享给大家一个批量查询百度收录 ...

  10. 被迫重构代码，这次我干掉了 if-else

    本文收录在个人博客:www.chengxy-nds.top,技术资源共享,一起进步 最近公司貌似融到资了!开始发了疯似的找渠道推广,现在终于明白为啥前一段大肆的招人了,原来是在下一盘大棋,对员工总的来 ...