我們先來(lái)看下效果：

（學(xué)習(xí)視頻推薦：java課程）

一、適用需求

后臺(tái)生成驗(yàn)證碼，用于登陸驗(yàn)證。

二、實(shí)現(xiàn)流程

1、視圖層思路

（1）input用于輸入驗(yàn)證碼，一個(gè)img用于展示驗(yàn)證碼

（2）校驗(yàn)輸入的驗(yàn)證碼是否合格，雙擊img刷新驗(yàn)證碼，綁定onblue失去焦點(diǎn)事件（鼠標(biāo)失去焦點(diǎn)時(shí)觸發(fā)的事件）

（3）onblue事件中做校驗(yàn)，

（4）img中的src屬性值為后臺(tái)生成驗(yàn)證碼的方法請(qǐng)求路徑（即requestMapping的路徑），當(dāng)再點(diǎn)擊驗(yàn)證碼的時(shí)候，再動(dòng)態(tài)設(shè)置src屬性即可（原訪問(wèn)地址+隨機(jī)時(shí)間戳，防止同一路徑瀏覽器不另做訪問(wèn)的問(wèn)題）

注意：后臺(tái)直接返回圖片，不是驗(yàn)證碼的字符!若返回字符，則驗(yàn)證碼就失去了意義（前臺(tái)很容易就可以獲取驗(yàn)證碼字符，進(jìn)行多次惡意訪問(wèn)了）（這點(diǎn)考慮了系統(tǒng)安全性）

2、后端思路
利用BufferedImage類創(chuàng)建一張圖片，再用Graphics2D對(duì)圖片進(jìn)行繪制（生成隨機(jī)字符，添加干擾線）即可，注意：生成的驗(yàn)證碼字符串要放到session中，用于接下來(lái)登陸的驗(yàn)證碼驗(yàn)證(當(dāng)然也是后臺(tái))。

前端代碼如下：

            <td class="tds">驗(yàn)證碼：</td>
            <td>
                <input type="text" name="valistr" onblur="checkNull(&#39;valistr&#39;,&#39;驗(yàn)證碼不能為空！&#39;)">
                <img id="yzm_img" src="${pageContext.request.contextPath}/servlet/ValiImgServlet" style="cursor: pointer" onclick="changeYZM(this)"/>
                <span id="valistr_msg"></span>
            </td>
               /**
         * 校驗(yàn)字段是否為空
         */
        function checkNull(name,msg){
            setMsg(name,"")
            var v = document.getElementsByName(name)[0].value;
            if(v == ""){
                setMsg(name,msg)
                return false;
            }
            return true;
        }     
     /**
         * 為輸入項(xiàng)設(shè)置提示消息
         */
        function setMsg(name,msg){
            var span = document.getElementById(name+"_msg");
            span.innerHTML="<font color=&#39;red&#39;>"+msg+"</font>";
        }
 /**
         * 點(diǎn)擊更換驗(yàn)證碼
         */
        function changeYZM(imgObj){
            imgObj.src = "${pageContext.request.contextPath}/servlet/ValiImgServlet?time="+new Date().getTime();
        }

后端代碼如下：

package cn.tedu.web;

import cn.tedu.util.VerifyCode;

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

/**
 * 獲取驗(yàn)證碼
 */
public class ValiImgServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //禁止瀏覽器緩存驗(yàn)證碼
        response.setDateHeader("Expires",-1);
        response.setHeader("Cache-Control","no-cache");
        response.setHeader("Pragma","no-cache");
        //生成驗(yàn)證碼
        VerifyCode vc = new VerifyCode();
        //輸出驗(yàn)證碼
        vc.drawImage(response.getOutputStream());
        //獲取驗(yàn)證碼的值，存儲(chǔ)到session中
        String valistr = vc.getCode();
        HttpSession session = request.getSession();
        session.setAttribute("valistr",valistr);
        //打印到控制臺(tái)
        System.out.println(valistr);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

package cn.tedu.util;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
/**
 * 動(dòng)態(tài)生成圖片
 */
public class VerifyCode {
	// {"宋體", "華文楷體", "黑體", "華文新魏", "華文隸書", "微軟雅黑", "楷體_GB2312"}
	private static String[] fontNames = { "宋體", "華文楷體", "黑體", "微軟雅黑",  "楷體_GB2312" };
	// 可選字符
	//"23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
	private static String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
	// 背景色
	private Color bgColor = new Color(255, 255, 255);
	// 基數(shù)(一個(gè)文字所占的空間大小)
	private int base = 30;
	// 圖像寬度
	private int width = base * 4;
	// 圖像高度
	private int height = base;
	// 文字個(gè)數(shù)
	private int len = 4;
	// 設(shè)置字體大小
	private int fontSize = 22;
	// 驗(yàn)證碼上的文本
	private String text;

	private BufferedImage img = null;
	private Graphics2D g2 = null;

	/**
	 * 生成驗(yàn)證碼圖片
	 */
	public void drawImage(OutputStream outputStream) {
		// 1.創(chuàng)建圖片緩沖區(qū)對(duì)象, 并設(shè)置寬高和圖像類型
		img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		// 2.得到繪制環(huán)境
		g2 = (Graphics2D) img.getGraphics();
		// 3.開始畫圖
		// 設(shè)置背景色
		g2.setColor(bgColor);
		g2.fillRect(0, 0, width, height);

		StringBuffer sb = new StringBuffer();// 用來(lái)裝載驗(yàn)證碼上的文本

		for (int i = 0; i < len; i++) {
			// 設(shè)置畫筆顏色 -- 隨機(jī)
			// g2.setColor(new Color(255, 0, 0));
			g2.setColor(new Color(getRandom(0, 150), getRandom(0, 150),getRandom(0, 150)));

			// 設(shè)置字體
			g2.setFont(new Font(fontNames[getRandom(0, fontNames.length)], Font.BOLD, fontSize));

			// 旋轉(zhuǎn)文字(-45~+45)
			int theta = getRandom(-45, 45);
			g2.rotate(theta * Math.PI / 180, 7 + i * base, height - 8);

			// 寫字
			String code = codes.charAt(getRandom(0, codes.length())) + "";
			g2.drawString(code, 7 + i * base, height - 8);
			sb.append(code);
			g2.rotate(-theta * Math.PI / 180, 7 + i * base, height - 8);
		}

		this.text = sb.toString();

		// 畫干擾線
		for (int i = 0; i < len + 2; i++) {
			// 設(shè)置畫筆顏色 -- 隨機(jī)
			// g2.setColor(new Color(255, 0, 0));
			g2.setColor(new Color(getRandom(0, 150), getRandom(0, 150),
					getRandom(0, 150)));
			g2.drawLine(getRandom(0, 120), getRandom(0, 30), getRandom(0, 120),
					getRandom(0, 30));
		}
		//TODO:
		g2.setColor(Color.GRAY);
		g2.drawRect(0, 0, this.width-1, this.height-1);
		// 4.保存圖片到指定的輸出流
		try {
			ImageIO.write(this.img, "JPEG", outputStream);
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}finally{
			// 5.釋放資源
			g2.dispose();
		}
	}

	/**
	 * 獲取驗(yàn)證碼字符串
	 * @return
	 */
	public String getCode() {
		return this.text;
	}

	/*
	 * 生成隨機(jī)數(shù)的方法
	 */
	private static int getRandom(int start, int end) {
		Random random = new Random();
		return random.nextInt(end - start) + start;
	}

	/*public static void main(String[] args) throws Exception {
		VerifyCode vc = new VerifyCode();
		vc.drawImage(new FileOutputStream("f:/vc.jpg"));
		System.out.println("執(zhí)行成功~!");
	}*/
}

總結(jié)：

簡(jiǎn)介：是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈測(cè)試）的縮寫，是一種區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序。

歷史：是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈測(cè)試）的縮寫，是一種區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序。

作用：防止惡意破解密碼、刷票、論壇灌水、刷頁(yè)。

分類：Gif動(dòng)畫驗(yàn)證碼，手機(jī)短信驗(yàn)證碼，手機(jī)語(yǔ)音驗(yàn)證碼，視頻驗(yàn)證碼

常見的驗(yàn)證碼：

（1）四位數(shù)字和字母，可能都是字母，也可能都是數(shù)字，隨機(jī)的4位字符串，最原始的驗(yàn)證碼，驗(yàn)證作用幾乎為零。CSDN網(wǎng)站用戶登錄用的是GIF格式，常用的隨機(jī)數(shù)字圖片驗(yàn)證碼。圖片上的字符比較中規(guī)中矩，驗(yàn)證作用比上一個(gè)好。

（2）漢字是注冊(cè)目前最新的驗(yàn)證碼，隨機(jī)生成，打起來(lái)比較難，例如QQ申訴頁(yè)面。

（3）MS的hotmail申請(qǐng)時(shí)候的是BMP格式, 隨機(jī)數(shù)字+隨機(jī)大寫英文字母+隨機(jī)干擾像素+隨機(jī)位置。

（4）韓文或日文，現(xiàn)在跑跑HF上MS注冊(cè)要打韓文，增加了難度。

（5）Google的Gmail注冊(cè)時(shí)候的是JPG格式，隨機(jī)英文字母+隨機(jī)顏色+隨機(jī)位置+隨機(jī)長(zhǎng)度。

（6）其他各大論壇的是XBM格式，內(nèi)容隨機(jī)

?（7）廣告驗(yàn)證碼：輸入廣告中的部分內(nèi)容即可，特點(diǎn)是可以給網(wǎng)站帶來(lái)額外收入，也可以使使用者耳目一新。 廣告驗(yàn)證碼

（8）問(wèn)題驗(yàn)證碼：?jiǎn)栴}驗(yàn)證碼主要是以問(wèn)答式的形式來(lái)進(jìn)行填寫。它的查看比加模驗(yàn)證碼更容易辨別和錄入，系統(tǒng)可以生成諸如“1+2=？”的問(wèn)題讓用戶進(jìn)行回答，當(dāng)然這樣的問(wèn)題是隨機(jī)生成的。另一種問(wèn)題驗(yàn)證碼，則是文字式的問(wèn)題驗(yàn)證碼，諸如生成問(wèn)題“中國(guó)的全稱是什么？”，當(dāng)然有些網(wǎng)站還在問(wèn)題后面給出了提示答案或直接答案。

相關(guān)推薦：java入門

以上是利用java來(lái)生成后臺(tái)驗(yàn)證碼的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！