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

我们首先在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. Python每日一练(1)

    这两天在做Python的每日一练,感觉收获颇丰,所以来记录分享一下,一共做了三个,涉及socket,PIL,pymysql三个库,另外终于开始了Flask框架的学习,后续也会做出一些分析 第一个是一个 ...

  2. 07 . Python3函数

    Python3函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print().我们可以直接调用 ...

  3. UWP开发入门（25）——通过Radio控制Bluetooth, WiFi

    回顾写了许久的UWP开发入门,竟然没有讲过通过Windows.Devices.Radios.Radio来控制Bluetooth和WiFi等功能的开关.也许是因为相关的API设计的简单好用,以至于被我给 ...

  4. SpringBoot 2.x 版本以put方式提交表单不生效的问题详解

    在使用SpringBoot 2.x版本时,原有springboot 1.x 版本的通过在表单中添加 input框隐藏域指定_method = put 的方式失效. 虽然浏览器传参的确是带上了这个参数, ...

  5. oracle11g数据库导入、导出操作

    一.在linux系统中导入数据库. 1.linux中先输入 su - oracle下切换到oracle用户.然后以sysdba打开sqlplus:sqlplus / as sysdba 然后创建表空间 ...

  6. Rocket - decode - Term

    https://mp.weixin.qq.com/s/CbBWdTlc_DESlUzd8KFcSg   介绍Term类各方法的实现.     ​​   1. prime   表示一个项是否是质项,即这 ...

  7. （Java实现） 光荣的梦想

    光荣的梦想 Time Limit:10000MS Memory Limit:65536K Total Submit:110 Accepted:45 Description Prince对他在这片大陆上 ...

  8. Java实现 蓝桥杯VIP 算法训练 连接字符串

    算法训练 连接字符串 时间限制:1.0s 内存限制:512.0MB 编程将两个字符串连接起来.例如country与side相连接成为countryside. 输入两行,每行一个字符串(只包含小写字母, ...

  9. Java实现 LeetCode 142 环形链表 II（二）

    142. 环形链表 II 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始 ...

  10. java实现第六届蓝桥杯垒骰子

    垒骰子 题目描述 赌圣atm晚年迷恋上了垒骰子,就是把骰子一个垒在另一个上边,不能歪歪扭扭,要垒成方柱体. 经过长期观察,atm 发现了稳定骰子的奥秘:有些数字的面贴着会互相排斥! 我们先来规范一下骰 ...