一次性验证码

通过在表单中总是需要使用一次性验证码,这一问题可以使用VerifyCodeServlet来处理。让<img>元素的src指向VerifyCodeServlet即可在页面中生成一次性验证码。而且VerifyCodeServlet还会把验证码保存到session中,名称为:vCode,也就是说,你可以通过session来获取验证码文本:session.getAttribute(“vCode”)。

1.写表单,其中包含图片(验证码)
2.让图片显示出来
把<img>d src指向VerifyCodeServlet,你需要在web.xml中部署 VerifyCodeServlet 。这里需要在web.xml文件里面加入以下内容,还需要导入jar包。

jar包下载地址//download.csdn.net/download/qq_42391248/12089304

下载的jar包,内有名为:itcast-tools-1.4.jar的包。VerifyCodeServlet就是写在这里面


3.写换一张的js

因为用户可能看不清楚图片上的文本,所以我们需要给用户提供一个“换一张”超链接。其实实现这一步很简单,只需要使用javascript让<img>元素src指向VerifyCodeServlet即可。但因为浏览器可能会缓存上一次生成的图片,所以我们还需要使用时间为参数“强迫”浏览器访问服务器,而不是使用缓存。

当用户在表单中填写了验证码,而且提交了表单,到达UserServlet的regist()方法,在regist() 方法中需要比较用户在表单中输入的验证码,与验证码图片上的文本是否相同。

  1. 获取用户输入的验证码:request.getParameter(“verifyCode”);
  2. 获取图片上的验证码:session.getAttribute(“vCode”);

web.xml

<servlet>
  <servlet-name>VerifyCodeServlet</servlet-name>
  <servlet-class>cn.itcast.vcode.servlet.VerifyCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>VerifyCodeServlet</servlet-name>
  <url-pattern>/VerifyCodeServlet</url-pattern>
</servlet-mapping>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<c:url value='/js/jquery-1.5.1.js'/>"></script>
	<script type="text/javascript">
		function change() {
			var img=document.getElementById("img");
			//因为用户可能看不清楚图片上的文本,所以我们需要给用户提供一个“换一张”超链接。其实实现这一步很简单,只需要使用javascript让<img>元素src指向VerifyCodeServlet即可。但因为浏览器可能会缓存上一次生成的图片,所以我们还需要使用时间为参数“强迫”浏览器访问服务器,而不是使用缓存。
			img.src="/tools/VerifyCodeServlet?a=" + new Date().getTime();
		}
	</script>
  </head>
  
  <body>
<%--
1.写表单,其中包含图片(验证码)
2.让图片显示出来
把<img>d src指向VerifyCodeServlet,你需要在web.xml中部署 VerifyCodeServlet 
3.换一张
--%>
<form action="<c:url value='/UserServlet'/>" method="post">
	<input type="hidden" name="method" value="regist"/>
	验证码:<input type="text" name="verifyCode"/>
	<img id="img" src="<c:url value='/VerifyCodeServlet'/>" border="1"/>
	<a href="javascript:change();">换一张</a>
	<br/>
	<input type="submit" value="注册"/>
</form>
  </body>
</html>
发布了247 篇原创文章 · 获赞 53 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/qq_42391248/article/details/103916945