`
fanzhongyun
  • 浏览: 44772 次
  • 性别: Icon_minigender_1
  • 来自: 广东茂名
文章分类
社区版块
存档分类
最新评论

java 注册/登录 验证码的实现

    博客分类：
  • java
dwrjquery验证码java 注册/登录 验证码的实现 
阅读更多

现在的很多网站，在注册或登录或发表评论或下载文件等等的时候都会生成一些验证码来让用户输入进行校验。这样可以防止某些别有用心的用户利用计算机恶意自动注册，自动登录，恶意增加数据库的访问等等
目前常用的验证码生成方法有很多种，我在里用的是纯数字的验证码，大家都会比较好接受的


在这里我主要是使用了jquery和dwr技术，如果你对dwr技术不是很熟悉的话，可以看一下我上一篇文章。下面来看一下我的实现方法：

首先需要生成一个4位的随机数作为验证码，这个比较简单，来看一下这个类： 

package gdut.random;

import java.util.Random;

public class CreateRandom {

	private static Random ran = null;
	private static String string = "";
	public String getRandom(){
		
		if(ran == null){
			ran = new Random();
		}
		string = "";
		for(int i=0;i<4;i++){	//生成4位随机数的验证码
			string += ran.nextInt(9) + 1;
		}
		return string;
	}
}


接下来是对WEB-INF目录下的web.xml的配置： 

<servlet>
   <servlet-name>dwr-invoker</servlet-name>
 
   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
   <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
   </init-param>
   <init-param>
   	<param-name>crossDomainSessionSecurity</param-name>
   	<param-value>false</param-value>
   </init-param>
   <init-param>
   	<param-name>allowScriptTagRemoting</param-name>
   	<param-value>true</param-value>
   </init-param>
   
 </servlet>
 <servlet-mapping>
   <servlet-name>dwr-invoker</servlet-name>
   <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>


接着需要在WEB-INF目录下新建一个dwr.xml文件，并对其做以下配置，具体的配置属性我就不多说了，如有不理解的请看我的上一篇有关dwr的文章： 

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> 

<dwr>

	<allow>
		<create javascript="obtainRandom" creator="new">
			<param name="class" value="gdut.random.CreateRandom" />
		</create>
	</allow>

</dwr>


然后是导入dwr框架所需要的jar包，即dwr.jar和commons-logging.jar，这两个包我已添加到附件中。
接下来写一个CSS为验证码生成一张背景图片： 
.code_box {

	background-image:url(/IdentifyCode/imgs/code_img.jpg);
	width:120px;
	height:30px;
	padding-top:1px;
	padding-bottom:1px;
	font-size:21px;
	background-repeat:no-repeat;
	border: #666666 solid 1px;
	text-align:center;
	text-decoration: line-through;
	color: #999999;
	font-family: Georgia, "Times New Roman", Times, serif;
	position:relative;
}

.cursor {

	cursor: pointer;
	color: #0033FF;
	font-size: 15px;
}
.text_cursor {

	cursor: pointer;
	color: #0033FF;
	text-decoration: underline;
	font-size: 15px;
}
.text_cursor:hover {
	
	position:relative;
	left:1px;
	top: 1px;
}
#btn {

	background-color: #99FF33;
}


下面我们来写实现验证码的这个jsp： 

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>IdentifyCode Page</title>
    <!-- 将dwr和jquery框架所用到的js和我们将要写的用来做验证的js以及CSS文件链接进来 -->
	<script type="text/javascript" src="/IdentifyCode/js/jquery.js"></script>
	<script type="text/javascript" src="/IdentifyCode/js/identify.js"></script>
	<script type='text/javascript' src='/IdentifyCode/dwr/interface/obtainRandom.js'></script>
  	<script type='text/javascript' src='/IdentifyCode/dwr/engine.js'></script>
  	<script type='text/javascript' src='/IdentifyCode/dwr/util.js'></script>
	<link   type="text/css" rel="stylesheet" href="/IdentifyCode/css/style.css" />
  </head>
  
  <body bgcolor="#FFCC99">
  	<br/><br/>
    <div align="center">
      <table>
        <tr>
          <td>请输入验证码：</td>
          <td><input type="text" id="inputCode"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td><span class="code_box" id="code"></span></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="button" class="cursor" id="btn" value=" 验证 " /></td>
          <td><span class="text_cursor" id="toGetRandom">看不清&nbsp;&nbsp;换一个</span></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><span id="msg" style="color:red;"></span></td>
        </tr>
      </table>
    </div>
  </body>
</html>


下面我们可以来写校验验证码这个js脚本了： 

$(document).ready(function(){
	
	$("#inputCode").css("background-color","#FFFFCC");
	createIdentifyCode();
	
	$("#toGetRandom").click(function(){
		createIdentifyCode();
	});
	$("#btn").click(function(){
		var createCode = $("#inputCode").val();
		var inputCode  = $("#code").html();
		if(createCode == inputCode){
			$("#msg").html("验证通过！");
		}else{
			$("#msg").html("验证码错误！");
			createIdentifyCode();
		}
	});
	
	$("#inputCode").focus(function(){
		
		$("#inputCode").css("background-color","#FFFFCC");
	});
	$("#inputCode").blur(function(){
		
		$("#inputCode").css("background-color","#D6D6FF");
	});
});
function createIdentifyCode(){
	obtainRandom.getRandom(function(string){
			$("#code").html(string);
	});
}


OK，搞定了。
分享到：
| java ajax
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics