您的位置:首页 > 其它

验证码

2015-10-23 14:42 106 查看
效果图:



html代码:

<tr>
            <td height="50" align="right">验证码<b>*</b></td>
            <td valign="middle">
            	<input type="text" name="verifyCode" datatype="*" nullmsg="请输入验证码!" errormsg="验证码输入有误!" class="ecode" >
            	
            	<img id="imgObj" alt="验证码" class="imgCode"  onclick="changeImg()" src="<%= request.getContextPath() %>/util/validateCode/getCode" />
            </td>
            <td>
           	  <div class="Validform_checktip"></div>
                <div class="info">请输入验证码!<span class="dec"><s class="dec1">◆</s><s class="dec2">◆</s></span></div>           
              <div class="error">${code_error}</div> 
            </td>
          </tr>


js代码:

<script type="text/javascript">	
	
	//验证码换一张图片
	function changeImg() { 
		
        var imgSrc = $("#imgObj"); 
        var src = imgSrc.attr("src"); 
        imgSrc.attr("src", chgUrl(src)); 
    } 
	
	//时间戳     
    //为了使每次生成图片不一致,即不让浏览器读缓存,所以需要加上时间戳     
    function chgUrl(url) { 
        var timestamp = (new Date()).valueOf(); 
        url = url.substring(0, 33); 
        if ((url.indexOf("&") >= 0)) { 
            url = url + "×tamp=" + timestamp; 
        } else { 
            url = url + "?timestamp=" + timestamp; 
        } 
        return url; 
    } 
</script>


java后台代码:

package com.framework.common.utils;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping(value = "/util/validateCode")
public class ValidateCode {

	 private  int width = 90;//定义图片的width
	 private  int height = 20;//定义图片的height
	 private  int codeCount = 4;//定义图片上显示验证码的个数
	 private  int xx = 15;
	 private  int fontHeight = 18;
	 private  int codeY = 16;
	 char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
	    'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
	    'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

	 @RequestMapping(value = "getCode")
	  public  void getCode(HttpServletRequest req, HttpServletResponse resp)
	    throws IOException {

		 // 定义图像buffer
		 BufferedImage buffImg = new BufferedImage(width, height,
		 BufferedImage.TYPE_INT_RGB);	 
		 Graphics gd = buffImg.getGraphics();
		 // 创建一个随机数生成器类
		 Random random = new Random();
		 // 将图像填充为白色
		 gd.setColor(Color.WHITE);
		 gd.fillRect(0, 0, width, height);
		
		 // 创建字体,字体的大小应该根据图片的高度来定。
		 Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
		 // 设置字体。
		 gd.setFont(font);

		// 画边框。
		gd.setColor(Color.BLACK);
		gd.drawRect(0, 0, width - 1, height - 1);
		
		// 随机产生40条干扰线,使图象中的认证码不易被其它程序探测到。
		gd.setColor(Color.BLACK);
		for (int i = 0; i < 40; i++) {
			int x = random.nextInt(width);
			int y = random.nextInt(height);
			int xl = random.nextInt(12);
			int yl = random.nextInt(12);
			gd.drawLine(x, y, x + xl, y + yl);
		}

	  // randomCode用于保存随机产生的验证码,以便用户登录后进行验证。
	  StringBuffer randomCode = new StringBuffer();
	  int red = 0, green = 0, blue = 0;

	  // 随机产生codeCount数字的验证码。
	  for (int i = 0; i < codeCount; i++) {
		  // 得到随机产生的验证码数字。
		  String code = String.valueOf(codeSequence[random.nextInt(36)]);
		  // 产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
		  red = random.nextInt(255);
		  green = random.nextInt(255);
		  blue = random.nextInt(255);

		  // 用随机产生的颜色将验证码绘制到图像中。
		  gd.setColor(new Color(red, green, blue));
		  gd.drawString(code, (i + 1) * xx, codeY);
	
		  // 将产生的四个随机数组合在一起。
		  randomCode.append(code);
	   }
	   // 将四位数字的验证码保存到Session中。
	  HttpSession session = req.getSession();
	  System.out.print(randomCode);
	  session.setAttribute("code", randomCode.toString());

	  // 禁止图像缓存。
	  resp.setHeader("Pragma", "no-cache");
	  resp.setHeader("Cache-Control", "no-cache");
	  resp.setDateHeader("Expires", 0);
	  resp.setContentType("image/jpeg");

	  // 将图像输出到Servlet输出流中。
	  ServletOutputStream sos = resp.getOutputStream();
	  ImageIO.write(buffImg, "jpeg", sos);
	  sos.close();
	 }
	 
	 
}


form保存时校验:上面我已经将生产的验证码的值放到session的code里了,保存的时候,直接对比看一不一样。

@RequestMapping(value = "/regist")
	public String regist(Model model, PracticeUnit practiceUnit, HttpServletRequest request) throws IOException {
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		try {
			model.addAttribute("pu_industry", this.getDictCodeNames("PRAC_UNIT_INDUSTTRY")); // 所属行业
			model.addAttribute("pu_size", this.getDictCodeNames("PARC_UNIT_SIZE")); // 职工人数
			String vertifyCode = request.getParameter("verifyCode");
			HttpSession session = request.getSession();
			if (!vertifyCode.equalsIgnoreCase(session.getAttribute("code").toString())) {
				model.addAttribute("code_error", "验证码错误");
				throw new Exception("验证码错误");

			}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: