java web的验证码编写和运用

原创 2016年08月30日 16:45:19

首先明白验证码其实就是一张图片,只需运用相关java的awt包一些方法画出来,然后以imag流形式输出即可。当然图片中的字符串是保存在Session中的,同时一般情况下验证的提交方式都是无刷新(即Ajax)。


现在先在jsp中画一张图片,把图片中的文字保存到Session中同时整体以jpeg图片形式输出。具体代码实现如下(命名image.jsp):

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
	public Color getColor(){
		Random random = new Random();
		int r = random.nextInt(256);//0-255
		int g = random.nextInt(256);
		int b = random.nextInt(256);
		return new Color(r,g,b);
	}
	public String getNum(){
		String str = "";
		Random random = new Random();
		for(int i=0;i<4;i++){
			str += random.nextInt(10);//0-9
		}
		return str;
	}
%>
<%
    //不要缓存
	response.setHeader("pragma", "mo-cache");
	response.setHeader("cache-control", "no-cache");
	response.setDateHeader("expires", 0);
	//创建一张图片
	BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
	//创建画笔
	Graphics g = image.getGraphics();
	//设置画笔的颜色 
	g.setColor(new Color(200,200,200));
	//画一个矩形框 
	g.fillRect(0,0,80,30);
	
	//画30条随机的线条
	for (int i = 0; i < 30; i++) {
		Random random = new Random();
		int x = random.nextInt(80);
		int y = random.nextInt(30);
		int xl = random.nextInt(x+10);
		int yl = random.nextInt(y+10);
		g.setColor(getColor());
		g.drawLine(x, y, x + xl, y + yl);
	}
	
	//设置文字的属性
	g.setFont(new Font("serif", Font.BOLD,16));
	g.setColor(Color.BLACK);
	//获取随机字符串
	String checkNum = getNum();//"2525"
	
	//这个遍历是为了使每个字符间加距离
	StringBuffer sb = new StringBuffer();
	for(int i=0;i<checkNum.length();i++){
		sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
	}
	g.drawString(sb.toString(),15,20);
	//把字符串存入Session中
	session.setAttribute("CHECKNUM",checkNum);//2525
	//显示图片
	ImageIO.write(image,"jpeg",response.getOutputStream());
	
	/*
	由于jsp container在处理完成请求后会调用releasePageContet方法释放
         所用的PageContext object,并且同时调用getWriter方法,由于getWriter方法
         与在jsp页面中使用流相关的getOutputStream方法冲突,所以会造成这种异常,
         解决办法是:只需要在jsp页面的最后加上两条语句: 
	*/
	out.clear();
	out = pageContext.pushBody();
%><strong>

</strong>


以上jsp页面运行效果如图:





然后另开一个jsp用来提交表单,表单效果图:


实现代码:

<form>
		<table border="0" align="center">
			<tr>
				<th>验证码:</th>
				<td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>
				<td><img src="01_image.jsp" onclick="this.src='01_image.jsp?refresh='+Math.random()"/></td>
				<td id="res"></td>
			</tr>
		</table>
	</form>


这里设计成当填写完4个字符(验证码4个字符)时就自动进行验证,利用Ajax。这里是结合Struts2,JQuery(也有不用Jquery版)进行编写:


js版本一(不用Jquery时候)代码:

<script type="text/javascript">
//去掉二边的空格
function trim(str){               //"  zhaojun  "
	str = str.replace(/^\s*/,"");//"zhaojun  " 	
	str = str.replace(/\s*$/,"");//"zhaojun"
	return str; 	
}

//创建AJAX异步对象,即XMLHttpRequest
function createAJAX(){
	var ajax = null;
	try{
		ajax = new ActiveXObject("microsoft.xmlhttp");
	}catch(e1){
		try{
			ajax = new XMLHttpRequest();
		}catch(e2){
			alert("你的浏览器不支持ajax,请更换浏览器");
		}
	}
	return ajax;
}

document.getElementById("checkcodeID").onkeyup = function(){
	var checkcode = this.value;
	checkcode = trim(checkcode);//2525
	if(checkcode.length == 4){
		//NO1)
		var ajax = createAJAX();
		//NO2)
		var method = "POST";
		var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
		ajax.open(method,url);
		//NO3)
		ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//NO4)
		var content = "checkcode=" + checkcode;
		ajax.send(content);
	
		//--------------------------------------------------------等待
		
		//NO5)
		ajax.onreadystatechange = function(){
			if(ajax.readyState == 4){
				if(ajax.status == 200){
					//NO6)
					var tip = ajax.responseText;
					
					//NO7)
					var img = document.createElement("img");
					img.src = tip;
					img.style.width = "14px";
					img.style.height = "14px";
					var td = document.getElementById("res");
					td.innerHTML = "";
					td.appendChild(img);
				}
			}
		}
	}else{
		//清空图片
		var td = document.getElementById("res");
		td.innerHTML = "";
	}
}
</script>	


js版本二(用Jquery的时候)代码:

<script type="text/javascript">
//去掉二边的空格
function trim(str) { //"  zhaojun  "
	str = str.replace(/^\s*/, "");//"zhaojun  " 	
	str = str.replace(/\s*$/, "");//"zhaojun"
	return str;
}
$(document).ready(function() {

	$("#checkcodeID").keyup(function() {
		var $checkcode = $(this).val();
		$checkcode = trim($checkcode);//2525
		if($checkcode.length==4){
		 $.ajax( {
			type    : "POST",
			url     : "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime(),
			data    : {"checkcode":$checkcode},
			dataType :"text",
			success : function(backDate,textStatus,ajax){
						//alert(backDate!=null?"收到":"为收到");
						//alert(backDate);
						//alert(ajax.responseText);
						//$("td").filter("#res").append(img);
						$("#res").html(" "); 
						$("#res").append("<img src='"+backDate+"'  style='width:15px;height:15px;'/>");
					  }
		 } );
		}else{
		  $("#res").html(" ");
		}
	});
})
</script>


Struts.xml文件配置(留意result那里是没有的):

<package name="myPackage" extends="json-default" namespace="/">			
	<action 
		name="checkRequest" 
		class="com.lmk.checkCodeP.CheckcodeAction" 
		method="check">
	</action>
	
</package>	



Action的代码:

//客户端验证码
	private String checkcode;//2525
	//注入客户端验证码
	public void setCheckcode(String checkcode) {
		this.checkcode = checkcode;
	}
	/**
	 * 验证
	 */	
	public String check() throws Exception {
		//图片路径
		String tip = "images/MsgError.gif";
		//从服务器获取session中的验证码
		String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM");
		//将客户端的验证码与服务端的验证码进行比较
		if(checkcode.equals(checkcodeServer)){
			tip = "images/MsgSent.gif";
		}
		//以IO流的方式将tip变量的值输出到AJAX异步对象中
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
		//以下方式不是最好的,但可以完成AJAX异步交互
		return null;
	}



运行效果:




版权声明:本文为博主原创文章,未经博主允许不得转载。

javaWEB项目中如何实现验证码

一.什么是验证码及它的作用    :验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计算机的公共全自动程序,这个问题可以由计算机生成并评判,但是必须只有人类才能解答.可以防止恶意破解...
  • u014306128
  • u014306128
  • 2015年04月28日 16:10
  • 708

用MyEclipse编验证码(1)

初学JAVA只是跟着网上的视频学习了一下如何用java编辑验证码 所使用的版本是MyEclipse的2015版,与2014版有许多的不同 首先第一步是创建一个web project,注意的是不要直...
  • little_stacie
  • little_stacie
  • 2016年04月23日 21:14
  • 399

Python-web开发验证码的制作

一、验证码一般是放在一个项目的工具方法中二、验证码的代码#!/usr/bin/env python # encoding: utf-8 from random import randint,choic...
  • kuangshp128
  • kuangshp128
  • 2017年07月18日 17:01
  • 183

JavaWEB小知识学习--验证码生成

验证码是现在必不可少的一个小功能,可以放爆破,防垃圾请求,总之还是有一定约束力的SpringMVC实现验证码功能主要是提供一个URL请求,该请求对应的方法可以生成一张验证码图片,然后把该验证码数值存入...
  • u012706811
  • u012706811
  • 2016年07月14日 20:10
  • 8327

java web项目生成验证码的解决方案

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本人声明。否则将追究法律责任。 作者:永恒の_☆ 地址:http://blog.csdn.net/chenghui0317...
  • ch656409110
  • ch656409110
  • 2013年10月09日 22:29
  • 11598

Java实现验证码验证功能

Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢? Java实现验证码验证功能其实非常简单:用到了一个Graphics类在画板上绘制字...
  • weixin_36380516
  • weixin_36380516
  • 2017年02月22日 21:42
  • 2984

JavaWeb生成图片验证码

在上网注册账号的时候一般都会有图片验证码的验证,防止恶意注册,最让人讨厌的莫过于12306的找你妹。。但是这也不失为一种好的办法,今天就用Javaweb的方式来生成一个图片验证码。大概流程图如下所示:...
  • chenfengdejuanlian
  • chenfengdejuanlian
  • 2015年10月30日 11:07
  • 1254

java web中图片验证码功能实现

用户在注册网站信息的时候基本上都要数据验证码验证。那么图片验证码功能该如何实现呢? 大概步骤是: 1.在内存中创建缓存图片 2.设置背景色 3.画边框 4.写字母 5.绘制干扰信息 6....
  • longshengguoji
  • longshengguoji
  • 2014年09月20日 23:17
  • 4064

springMVC中web短信验证码校验

手机号: 验证码:获取验证码 提交 function sendCode(obj){ var phone = document.getElementById(...
  • suwing6406029
  • suwing6406029
  • 2014年08月09日 23:34
  • 7548

java生成验证码 封装类

package com.cn.fuleehaofangjia.biz; import java.awt.Color; import java.awt.Font; import java.awt...
  • u011786631
  • u011786631
  • 2014年03月12日 16:44
  • 573
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:java web的验证码编写和运用
举报原因:
原因补充:

(最多只允许输入30个字)