JSP实现验证码

效果如图： 并且点击图片可以更换验证码

验证码 验证原理：

JAVA绘制图片，然后将验证码的字符上传session，在登陆时候验证session 里的值和用户输入的值即可。

首先做个绘制类：

package Domain.func;

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

public class DrawYzm extends JFrame{
    private int width = 900;//验证码宽度
    private int height = 240;//验证码高度
    private int codeCount = 4;//验证码个数
    private int lineCount = 123;//混淆线个数

    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' };


    public void getCode( HttpServletRequest request,HttpServletResponse response) throws IOException {
        //定义随机数类
        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.black);
        g.drawRect(0,0,width,height);
        //2.设置颜色,填充内部
        g.setColor(Color.white);
        g.fillRect(1,1,width-2,height-2);
        //3.设置干扰线
        g.setColor(Color.blue);

        for (int i = 0; i < lineCount; i++) {
            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.LAYOUT_LEFT_TO_RIGHT,170));
        for (int i = 0; i < codeCount; i++) {
            char c = codeSequence[r.nextInt(codeSequence.length)];
            builderCode.append(c);
            g.drawString(c+"",150*(i+1),175);
        }
        //5.输出到屏幕
        ServletOutputStream sos = response.getOutputStream();
        ImageIO.write(buffImg,"png",sos);
        //6.保存到session中
        HttpSession session = request.getSession();
        session.setAttribute("codeValidate",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();
    }
}

做个servlet 针对验证码：

package Servlet;

import Domain.func.DrawYzm;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/YZM")
public class YZM extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        DrawYzm drawYzm=new DrawYzm();
        drawYzm.getCode(request,response);
        request.setAttribute("yzm",drawYzm);
        request.getRequestDispatcher("yzmimg").forward(request, response);

    }
}

在放验证码的地方放个div 里面存储图片。div 先display:none

然后js控制 当密码框被focus（焦点）时候，让display=block

img的src指向servlet YZM

这时候就会出现验证码了。

如何让验证码点击变化呢。

这里需要js控制。

点击时候重新给img指定src。

注意的是。src不能和原先一样，否则浏览器会缓存图片，导致验证码不改变。

所以可以使用这样的方法：

    document.getElementById("yzm_img_real").addEventListener("click",()=>{
        var url = document.getElementById("yzm_img_real").getAttribute("src");
            var randomnum = Math.random();
        document.getElementById("yzm_img_real").setAttribute("src",url+"?"+randomnum);
    },false);

监听 验证码点击，如果被点击

指定个随机数，让图片链接换成后代参数的链接（注：此参数纯属刷新浏览器缓存用，实现每个链接不一致）

既可以实现点击图片发生变化。