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

我们首先在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. 日期类之SimpleDateFormat

    1.System 类下的currentTimeMillis();2.Date类:java.util.Date及其子类java.sql.Date                  如何创建实例:其下的方 ...

  2. Robot Framework（15）- 扩展关键字

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

  3. 微软：悬赏10万美金破解 Linux 系统

    微软选择了 Linux 系统作为物联网平台,并且悬赏10万美金邀请黑客来进行破解. 当然,该悬赏计划不是针对所有的 Linux 系统,而是特别针对微软的物联网端对端安全平台Azure Sphere.本 ...

  4. 一篇文章，全面掌握Git

    版本控制 版本控制就是记录项目文件的历史变化.它为我们查阅日志,回退,协作等方面提供了有力的帮助. 版本控制一般分为集中化版本控制和分布式版本控制. 集中化主要的版本数据都保存服务端. 分布式版本数据 ...

  5. AVIRIS 简介

    AVIRIS 是指 机载可见光近红外成像光谱(Airborne Visible InfraRed Imaging Spectrometer).是由美国NASA下属的喷气动力实验室(JPL)开发和维护的 ...

  6. IC-二进制, 自然数, 有符号数

    https://mp.weixin.qq.com/s/9rGs9yN-OvLvEclnDZr87Q   零. 概念和结论 1. 数:概念名,指代物体的多少,即物体的量的概念: 2. 值:概念属性,数的 ...

  7. 【HBase】与关系型数据库区别、行式/列式存储

    [HBase]与关系型数据库区别 1.本质区别 mysql:关系型数据库,行式存储,ACID,SQL,只能存储结构化数据 事务的原子性(Atomicity):是指一个事务要么全部执行,要么不执行,也就 ...

  8. PriorityBlockingQueue 和 Executors.newCachedThreadPool()

    1.PriorityBlockingQueue里面存储的对象必须是实现Comparable接口. 2.队列通过这个接口的compare方法确定对象的优先级priority. 规则是:当前和其他对象比较 ...

  9. ASP.Net Web中Repeater怎么删除指定行

    使用OnItemCommand事件 首先附上相关的代码 <asp:Repeater ID="Repeater1" runat="server" OnIte ...

  10. Java实现 LeetCode 441 排列硬币

    441. 排列硬币 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整 ...