java制作验证码并进行验证

在注册、登录的页面上经常会出现验证码，为了防止频繁的注册或登录行为。下面是我用java制作的一个验证码，供初学者参考，做完验证码之后，我们可以用ajax进行验证码验证。

功能一：验证码制作的代码，点击图片，验证码进行更换

/**
 * 显示验证码图片
 */
public void showCheckCode(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    // 调用业务逻辑
    String checkCode = getCheckCode();
    //将验证码字符放入session域对象中
    req.getSession().setAttribute("checkCode", checkCode);

    //图片宽
    int width = 80;
    //图片高
    int height = 30;
    //在内存中创建一个图片
    BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    //获取一个画笔
    Graphics g = image.getGraphics();
    //设置画笔颜色，用灰色做背景
    g.setColor(Color.GRAY);
    //向Image中填充灰色
    g.fillRect(0,0,width,height);

    Random r = new Random();

    //设置3条干扰线
    for (int i = 0; i < 3; i++) {
        g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
        g.drawLine(r.nextInt(80), r.nextInt(30), r.nextInt(80), r.nextInt(80));
    }

    //设置验证码字符串的颜色
    g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
    //设置字符的大小
    g.setFont(new Font("黑体",Font.BOLD,24));
    //在图片中写入验证码字符串
    g.drawString(checkCode,15,20);
    //将Image对象以PNG格式输出给所有的客户端
    ImageIO.write(image,"PNG",resp.getOutputStream());
}

/**
 * 获取4位验证码中的4位随机字符串
 */
public static String getCheckCode(){
    //验证码中的字符由数字和大小写字母组成
    String code = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    Random r = new Random();
    StringBuffer sb = new StringBuffer();
    for (int i = 0; i < 4; i++) {
        sb.append(code.charAt(r.nextInt(code.length())));
    }

    return sb.toString();
}

jsp页面

<script type="text/javascript">
    function changeCodeImage(img){
        img.src = "${pageContext.request.contextPath}/UserServlet?method=showCheckCode&time="+new Date().getTime();
    }

</script>

  <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" id="writeCode" onkeyup="checkCodeMethod(this.value)" >

    </div>
    <div class="col-sm-2">
    <img src="${pageContext.request.contextPath}/UserServlet?method=showCheckCode" id="checkCodeImage" title="点击换一张" onclick="changeCodeImage(this)" />
    </div>
    <span id="checkCodeSpan"></span>
  </div>

功能二：ajax动态验证验证码

/**
 * 验证验证码
 */
public void checkCode(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    //获取从页面中接收到的验证码参数
    String checkCode = req.getParameter("checkCode");
    //从session域对象中获取验证码
    String sessionCode = (String) req.getSession().getAttribute("checkCode");
    //判断验证码是否相同
    if (checkCode.equalsIgnoreCase(sessionCode)) {
        resp.getWriter().print(true);
    }else {
        resp.getWriter().print(false);
    }

jsp页面

<script type="text/javascript">
    function changeCodeImage(img){
        img.src = "${pageContext.request.contextPath}/UserServlet?method=showCheckCode&time="+new Date().getTime();
    }

    function checkCodeMethod(code){
        $.get("${pageContext.request.contextPath}/UserServlet?method=checkCode", 
                { checkCode: code}, 
                function(data){
                    if (data == 'true') {
                        document.getElementById("checkCodeSpan").innerHTML = "<font>验证码正确!</font>";
                    }else {
                        document.getElementById("checkCodeSpan").innerHTML = "<font>验证码错误!</font>";
                    }
                }
            );
    }

</script>

  <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" id="writeCode" onkeyup="checkCodeMethod(this.value)" >

    </div>
    <div class="col-sm-2">
    <img src="${pageContext.request.contextPath}/UserServlet?method=showCheckCode" id="checkCodeImage" title="点击换一张" onclick="changeCodeImage(this)" />
    </div>
    <span id="checkCodeSpan"></span>
  </div>