文章目錄

• 前言
• 一、創建生成驗證碼的工具類
• 二、創建Servlet,將生成的驗證碼發送到前端頁面
• 三、從前端頁面接收驗證碼
• 四、編寫js函數，實現點一下獲取新的驗證碼

---

前言

驗證碼模板，可供參考。

一、創建生成驗證碼的工具類

import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.HashMap; import java.util.Map; import java.util.Random;public class CodeUtil {private static int width = 100;// 定義圖片的widthprivate static int height = 25;// 定義圖片的heightprivate static int codeCount = 4;// 定義圖片上顯示驗證碼的個數private static int xx = 15;private static int fontHeight = 18;private static int codeY = 16;private static 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' };/*** 生成一個map集合* code為生成的驗證碼* codePic為生成的驗證碼BufferedImage對象* @return*/public static Map<String,Object> generateCodeAndPic() {// 定義圖像bufferBufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// Graphics2D gd = buffImg.createGraphics();// Graphics2D gd = (Graphics2D) buffImg.getGraphics();Graphics gd = buffImg.getGraphics();// 創建一個隨機數生成器類Random random = new Random();// 將圖像填充為白色gd.setColor(Color.WHITE);gd.fillRect(0, 0, width, height);// 創建字體，字體的大小應該根據圖片的高度來定。Font font = new Font("Fixedsys", Font.BOLD, fontHeight);// 設置字體。gd.setFont(font);// 畫邊框。gd.setColor(Color.BLACK);gd.drawRect(0, 0, width - 1, height - 1);// 隨機產生40條干擾線，使圖象中的認證碼不易被其它程序探測到。gd.setColor(Color.BLACK);for (int i = 0; i < 30; i++) {int x = random.nextInt(width);int y = random.nextInt(height);int xl = random.nextInt(12);int yl = random.nextInt(12);gd.drawLine(x, y, x + xl, y + yl);}// randomCode用于保存隨機產生的驗證碼，以便用戶登錄后進行驗證。StringBuffer randomCode = new StringBuffer();int red = 0, green = 0, blue = 0;// 隨機產生codeCount數字的驗證碼。for (int i = 0; i < codeCount; i++) {// 得到隨機產生的驗證碼數字。String code = String.valueOf(codeSequence[random.nextInt(36)]);// 產生隨機的顏色分量來構造顏色值，這樣輸出的每位數字的顏色值都將不同。red = random.nextInt(255);green = random.nextInt(255);blue = random.nextInt(255);// 用隨機產生的顏色將驗證碼繪制到圖像中。gd.setColor(new Color(red, green, blue));gd.drawString(code, (i + 1) * xx, codeY);// 將產生的四個隨機數組合在一起。randomCode.append(code);}Map<String,Object> map =new HashMap<String,Object>();//存放驗證碼map.put("code", randomCode);//存放生成的驗證碼BufferedImage對象map.put("codePic", buffImg);return map;}}

二、創建Servlet,將生成的驗證碼發送到前端頁面

import java.awt.image.RenderedImage; import java.io.IOException; import java.util.Map;import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession;import com.chai.util.CodeUtil;/*** Servlet implementation class CodeServlet*/ @WebServlet("/getcode") public class CodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 調用工具類生成的驗證碼和驗證碼圖片Map<String, Object> codeMap = CodeUtil.generateCodeAndPic();// 將四位數字的驗證碼保存到Session中。HttpSession session = req.getSession();session.setAttribute("code", codeMap.get("code").toString());// 禁止圖像緩存。resp.setHeader("Pragma", "no-cache");resp.setHeader("Cache-Control", "no-cache");resp.setDateHeader("Expires", -1);resp.setContentType("image/jpeg");// 將圖像輸出到Servlet輸出流中。ServletOutputStream sos;try {sos = resp.getOutputStream();ImageIO.write((RenderedImage) codeMap.get("codePic"), "jpeg", sos);sos.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}} }

三、從前端頁面接收驗證碼

<p ><input class="code" type="text" name="veryCode" value="" placeholder="驗證碼"><img src="getcode" alt="看不清，換一張" onclick="change(this)" ><span></span></p>

四、編寫js函數，實現點一下獲取新的驗證碼

<script> function change(img) {img.src="getcode?"+new Date().getTime(); } </script>

---

總結

以上是生活随笔為你收集整理的web页面注册验证，实现从后端动态获取证码，到前端页面显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。