验证码实现 - 工具类调用版

前言

图片验证码是我们日常经常用到的，本文将介绍如何实现以及其原理，以注册页面为例实现功能。
如果对滑块验证码感兴趣的可以看这篇文章：滑块验证码实现及原理
如果对验证码实现感兴趣的可以看这篇文章：验证码实现 - html页面版
如果对表单校验感兴趣的可以看这篇文章：表单校验

代码实现

代码的解释在注释中已经写的很清楚了，如有更好的实现方式欢迎留言。
ValidateCode工具类

package cn.qd.utils;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

public class ValidateCode {

    private int width = 90;//验证码宽度 默认值：90
    private int height = 40;//验证码高度 默认值：40
    private int codeCount = 4;//验证码个数  默认值：4
    private int lineCount = 19;//混淆线个数  默认值：19
    private int  fontSize = 20;//字体大小像素
    // 存储session中的key值 默认值："validateCode"
    private String sessionKey = "validateCode";
    public ValidateCode(){}

    /**	 *
     * * @param width 验证码宽度
     * * @param height 验证码高度
     * * @param fontSize 字体大小像素
     * */
    public ValidateCode(int width,int height,int fontSize){
        this.width = width;
        this.height = height;
        this.fontSize = fontSize;
    }

    /**	 *
     *  * @param width 验证码宽度
     *  * @param height 验证码高度
     *  * @param fontSize 字体大小像素
     *  * @param sessionKey 存储session中的key值
     *  */
    public ValidateCode(int width,int height,int fontSize,String sessionKey){
        this.width = width;
        this.height = height;
        this.fontSize = fontSize;
        this.sessionKey = sessionKey;
    }
    /**	 *
     * * @param width 验证码宽度
     * * @param height 验证码高度
     * * @param codeCount 验证码个数
     * * @param fontSize 字体大小像素
     * * @param sessionKey 存储session中的key值
     * */
    public ValidateCode(int width,int height,int codeCount,int fontSize,String sessionKey){
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        this.fontSize = fontSize;
        this.sessionKey = sessionKey;
    }
    /**	 *
     * * @param width 验证码宽度
     * * @param height 验证码高度
     * * @param codeCount 验证码个数
     * * @param lineCount 混淆线个数
     * * @param fontSize 字体大小像素
     * * @param sessionKey 存储session中的key值
     * */
    public ValidateCode(int width,int height,int codeCount,int lineCount,int fontSize,String sessionKey){
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        this.lineCount = lineCount;
        this.fontSize = fontSize;
        this.sessionKey = sessionKey;
    }
    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' };
    /**
     *  * 具体获取验证码的方法
     *  * @param time  time为时戳,这样的话可以避免浏览器缓存验证码
     *  * @throws IOException
     *  */
    public void getCode(HttpServletRequest request, HttpServletResponse response){
        //定义随机数类
        Random r = new Random();
        //定义存储验证码的类
        StringBuilder builderCode = new StringBuilder();
        //定义画布
        BufferedImage buffImg = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        //得到画笔
        Graphics g = buffImg.getGraphics();
        //1.设置颜色,画边框
        g.setColor(Color.gray);
        g.drawRect(0,0,width,height);
        //2.设置颜色,填充内部
        g.setColor(Color.white);
        g.fillRect(1,1,width-2,height-2);
        //3.设置干扰线
        // g.setColor(Color.gray);
        for (int i = 0; i < lineCount; i++) {
            int _R = (int)Math.floor(Math.random()*256);
            int _G = (int)Math.floor(Math.random()*256);
            int _B = (int)Math.floor(Math.random()*256);
            g.setColor(new Color(_R, _G, _B, 255));
            g.drawLine(r.nextInt(width),r.nextInt(width),r.nextInt(width),r.nextInt(width));
        }
        //4.设置验证码
        g.setColor(Color.blue);
        //4.1设置验证码字体
        g.setFont(new Font("宋体",Font.BOLD|Font.ITALIC,fontSize));
        for (int i = 0; i < codeCount; i++) {
            char c = codeSequence[r.nextInt(codeSequence.length)];
            builderCode.append(c);
            g.drawString(c+"",((width/codeCount)*i+2),height*4/5);
        }
        try {
            //5.输出到屏幕
            ServletOutputStream sos = response.getOutputStream();
            ImageIO.write(buffImg,"png",sos);
            //6.保存到session中
            HttpSession session = request.getSession();
            session.setAttribute(""+sessionKey+"",builderCode.toString());
            //7.禁止图像缓存。
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            response.setContentType("image/png");
            //8.关闭sos
            sos.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

Controller层调用

/**
 * 验证码实现
  * @param request
  * @param response
  * @throws Exception
  */
@RequestMapping(value = "/captcha", method = RequestMethod.GET)
public void captcha(@RequestParam(value = "time") String time, HttpServletRequest request, HttpServletResponse response) throws Exception {
     ValidateCode code= new ValidateCode(130,35,30,"validateCode");
     code.getCode(request,response);
 }

注册页面

<%@ page import="java.util.Date" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!doctype html>
<html>
<head></head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css"/>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

<style>
    body {
        margin-top: 20px;
        margin: 0 auto;
    }

    .carousel-inner .item img {
        width: 100%;
        height: 300px;
    }

    .container .row div {
        /* position:relative;
        float:left; */
    }

    font {
        color: #3164af;
        font-size: 18px;
        font-weight: normal;
        padding: 0 10px;
    }
</style>
<script type="text/javascript">
    $(function () {
        //time表示时间戳，可以防止缓存，确保每次生成不同的验证码
        $("#captchaImage").click(function(){
            //$("#captchaImage").attr("src", "user/captcha?time=" + (new Date()).valueOf());
            this.src = "${pageContext.request.contextPath}/user/captcha?time="+new Date().getTime();
        });
    });

    //校验验证码
    function checkCode() {
        //1.获取验证码的值
        var code = document.getElementById("checkcode").value;
        //2.获取随机生成的验证码

        //3.提示信息
        var s_code = document.getElementById("s_code");
        //3.判断两次的值是否一致
        if (code != confirmpwd) {
            //提示红色错误信息
        s_code.innerHTML = "验证码不一致";
        }
        return flag;
    }
</script>
</head>
<body>

<%@ include file="/WEB-INF/pages/header.jsp" %>

<div class="container" style="width:100%;background:url('${pageContext.request.contextPath}/img/regist_bg.jpg');">
    <div class="row">

        <div class="col-md-2"></div>


        <div class="col-md-8" style="background:#fff;padding:40px 80px;margin:30px;border:7px solid #ccc;">
            <font>会员注册</font>USER REGISTER
            <form class="form-horizontal" style="margin-top:5px;" id="registerFrom" method="post"
                  action="${pageContext.request.contextPath}/user/registerUser">
                <input type="hidden" name="uid" value="0"/>
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
                    </div>
                    <div style="color: red;"><span id="s_username" class="error"></span></div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                    </div>
                    <div style="color: red;"><span id="s_password" class="error"></span></div>
                </div>
                <div class="form-group">
                    <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" name="pwd" id="confirmpwd" placeholder="请输入确认密码">
                    </div>
                    <div style="color: red;"><span id="s_confirmpwd" class="error"></span></div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email">
                    </div>
                    <div style="color: red;"><span id="s_email" class="error"></span></div>
                </div>
                <div class="form-group">
                    <label for="usercaption" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
                    </div>
                    <div style="color: red;"><span id="s_rename" class="error"></span></div>
                </div>
                <div class="form-group">
                    <label for="usertelepone" class="col-sm-2 control-label">手机号</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="telephone" id="telephone" placeholder="请输入手机号">
                    </div>
                    <div style="color: red;"><span id="s_telphone" class="error"></span></div>
                </div>
                <div class="form-group opt">
                    <label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-6">
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="sex1" value="男"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="sex2" value="女"> 女
                        </label>
                    </div>
                </div>
                <input type="hidden" name="state" value="1"/>
                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">出生日期</label>
                    <div class="col-sm-6">
                        <input type="date" class="form-control" name="birthday" id="birthday">
                    </div>
                </div>

                <div class="form-group">
                    <label for="date" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" name="code" id="checkcode" placeholder="请输入验证码">
                    </div>
                    <div class="col-sm-2">
                        <img src="${pageContext.request.contextPath}/user/captcha?time=<%=new Date().getTime() %>" id="captchaImage" title="点击图片重新获得验证码"/><%--img/captcha.jhtml--%>
                        <%--<a id="captchaImage2" >换一张</a><span></span></td>--%>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="submit" width="100" value="注册" name="submit" border="0"
                               style="background: url('${pageContext.request.contextPath}/img/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                                       height:35px;width:100px;color:white;">
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-2"></div>

    </div>
</div>

<%@ include file="/WEB-INF/pages/footer.jsp" %>

</body>
</html>

效果图展示

---

如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客