登录注册页面上验证码的生成（jsp）

验证码的生成（图片验证码）

相信下次还需要用的图片验证码的验证，放到自己的博客上下次容易找哦

代码

1.后台 controller层

@Controller
@RequestMapping("/code")
public class CodeController {
	public int width=110;//图片宽度
	public int height=30;
	
	//验证码
	@RequestMapping(value="/createCode",method=RequestMethod.GET)
	public void code(String code,HttpServletRequest request ,HttpServletResponse response) throws IOException{
		response.setHeader("refresh", "2"); //设置响应头控制浏览器每隔2S刷新页面
        String createTypeFlag = request.getParameter("createTypeFlag");//向客户端传递的createTypeFlag标识
        //1.在内存中创建一张图片
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        //2.得到图片
        Graphics g = bi.getGraphics();
        //3.设置图片的背景色
        setBackGround(g);
        //4.设置图片的边框
        setBorder(g);
        //5.在图片上画干扰线
        int num = 5;//控制线条的数量
        drawRandomLine(g, num);
        //6.写在图片上的随机数
        int num2 = 4;//最多4个，这个地方可以通过调节输入框的宽度来进行调节
        String random = drawRandomNum((Graphics2D) g, num2, createTypeFlag);
        //7.将随机数写在session里面
        request.getSession().setAttribute("checkcode", random);
        //8.设置响应头通知浏览器以图片的方式打开
        response.setContentType("image/jpeg");
        //9.设置响应头控制浏览器不要缓存
        response.setDateHeader("expries", -1);
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Pragma", "no-cache");
        //10.、把图片写进浏览器
        ImageIO.write(bi, "jpg", response.getOutputStream());
        
	}

	/****设置图片的背景色***/
    private void setBackGround(Graphics g) {
        //设置颜色
        g.setColor(Color.WHITE);
        //填充区域
        g.fillRect(0, 0, width, height);
    }

    /***设置图片的边框**/
    private void setBorder(Graphics g) {
        g.setColor(Color.BLUE);
        g.drawRect(1, 1, width - 2, height - 2);
    }

    /*****设置图片的随即线条******/
    private void drawRandomLine(Graphics g, int num) {
        //g.setColor(Color.GREEN);
        //设置线条个数并划线
        for (int i = 0; i < num; i++) {
        	int red=new Random().nextInt(255);
			int green=new Random().nextInt(255);
			int blue=new Random().nextInt(255);
			Color c = new Color(red,green,blue);
					
			g.setColor(c);
            int x1 = new Random().nextInt(width);
            int y1 = new Random().nextInt(height);
            int x2 = new Random().nextInt(width);
            int y2 = new Random().nextInt(height);
            g.drawLine(x1, y1, x2, y2);
        }
    }

    /*******画随机字符*******/
    private String drawRandomNum(Graphics2D g, int num, String...createTypeFlag) {
        g.setColor(Color.RED);
        g.setFont(new Font("宋体", Font.BOLD, 20));
        //数字和字母的组合
        String baseNumLetter = "0123456789abcdefghijklmnopqrestuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";
        return createRandomChar(g, baseNumLetter,num);
    }

    /**
     * 创建随机字符
     **/
    private String createRandomChar(Graphics2D g, String baseChar, int num) {
        StringBuffer sb = new StringBuffer();
        int x = 5;
        String ch = "";
        //控制字数
        for (int i = 0; i < num; i++) {
            // 设置字体旋转角度
            int degree = new Random().nextInt() % 30;
            ch = baseChar.charAt(new Random().nextInt(baseChar.length())) + "";
            sb.append(ch);
            // 正向角度
            g.rotate(degree * Math.PI / 180, x, 20);
            g.drawString(ch, x, 20);
            // 反向角度
            g.rotate(-degree * Math.PI / 180, x, 20);
            x += 30;
        }
        return sb.toString();
    }
    
    //页面输入的验证码与后台的做对比
    @RequestMapping(value="/yan",method=RequestMethod.POST)
    public @ResponseBody boolean yan(String code,HttpServletResponse response,HttpServletRequest request){
    	boolean flag=false;
    	
    	//接受code方法产生的随机数
    	String random = (String)request.getSession().getAttribute("checkcode");
        if(code.contains(random)){
        	flag=true;
        }
        return flag;
    }
}

2.jsp页面

<!-- 验证码 -->
<div class="wrap-input100 validate-input">
	<input type="text"  name="code" id="code1" class="input100" value="" placeholder="字母区分大小写" />
	<img src="${pageContext.request.contextPath}/code/createCode" alt="" id="validateCodeImg" onclick="changeImg();">
	<a href="javaScript:void();" id="validateCodeImg" onclick="changeImg();"><font >看不清，换一张</font></a>
</div>

3.js代码

$(function(){
		$("#code1").blur(function(){
			//获取 输入的验证码并验证
			var code=$("#code1").val();
			if(code.length > 0){
				$.ajax({
			   		type:"POST",
			   		dataType:"json",
			   		url:"${pageContext.request.contextPath}/code/yan",
			   		data:{"code":code},
			   		success:function(data){
			   			if(data != true){
			   				alert("验证码输入不正确");
			   				changeImg();
			   			}else{
			   				alert("验证码输入正确");
			   			}
			   		}
			   	});
			}else{
				alert("输入的内容不能为空");
			}
		});
});

//验证码
function changeImg() {
   document.getElementById("validateCodeImg").src=
       "${pageContext.request.contextPath}/code/createCode?"+Math.random();
}

4.效果图片