javaWeb實現驗證碼--代碼超簡單

時間 2019-11-13

原文原文鏈接

一、前端顯示html

HTML：前端

<h3>驗證碼：</h3>
<input type="text" name="validationCode" id="validationCode" placeholder="請輸入驗證碼" lay-verify="required"> 
<img src="validate.jsp" id="validationCode_img" title="看不清?換一個" onclick="loadimage();return false;" name="validationCode_img" align="middle">

JS：java

//加載驗證碼圖片，後面加時間能夠保證每次頁面刷新時驗證碼也刷新
function loadimage(){
            document.getElementById("validationCode_img").src= "validate.jsp?time=" + new Date().getTime();
        }

二、用一個頁面生成驗證碼圖片，這裏我用JSP頁面validate.jspajax

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="java.awt.Graphics2D"%>
<%@page import="java.awt.Color"%>
<%@page import="java.awt.Font"%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.util.Random"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>驗證碼</title>
</head>
<body>
<%
    int width = 60;
    int height = 20;
    // 建立具備可訪問圖像數據緩衝區的Image
    BufferedImage buffImg = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
    Graphics2D g = buffImg.createGraphics();
    
    // 建立一個隨機數生成器
    Random random = new Random();
    
    g.setColor(Color.WHITE);
    g.fillRect(0, 0, width, height);
    
    // 建立字體，字體的大小應該根據圖片的高度來定
    Font font = new Font("Times New Roman", Font.PLAIN, 18);
    // 設置字體
    g.setFont(font);
    
    // 畫邊框
    g.setColor(Color.BLACK);
    g.drawRect(0, 0, width - 1, height - 1);
    
    // 隨機產生160條幹擾線
    g.setColor(Color.LIGHT_GRAY);
    for (int i = 0; i < 160; i++) {
        int x = random.nextInt(width);
        int y = random.nextInt(height);
        int x1 = random.nextInt(12);
        int y1 = random.nextInt(12);
        g.drawLine(x, y, x + x1, y + y1);
    }
    
    // randomCode 用於保存隨機產生的驗證碼
    StringBuffer randomCode = new StringBuffer();
    int red = 0, green = 0, blue = 0;
    
    // 隨機產生4位數字的驗證碼
    for (int i = 0; i < 4; i++) {
        // 獲得隨機產生的驗證碼數字
        String strRand = String.valueOf(random.nextInt(10));
    
        // 產生隨機的顏色份量來構造顏色值
        red = random.nextInt(110);
        green = random.nextInt(50);
        blue = random.nextInt(50);
    
        // 用隨機產生的顏色將驗證碼繪製到圖像中
        g.setColor(new Color(red, green, blue));
        g.drawString(strRand, 13 * i + 6, 16);
    
        randomCode.append(strRand);
    }
    
    // 將四位數字的驗證碼保存到session中
    //HttpSession session = request.getSession();
    session.setAttribute("randomCode", randomCode.toString());
    
    // 禁止圖像緩存
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);
    
    response.setContentType("image/jpeg");
    // 將圖像輸出到servlet輸出流中
    ServletOutputStream sos = response.getOutputStream();
    ImageIO.write(buffImg, "jpeg", sos);
    sos.close();
    //sos = null;
    out.clear();
    out = pageContext.pushBody();
%>
</body>
</html>

三、在validate.jsp頁面中生成的驗證碼其實就是在java後端生成的，因此就存進了session中，咱們只須要在用戶提交的時候將填寫的驗證碼帶到後端，這裏我使用的是ajax請求，後端只須要判斷驗證碼是否和session中同樣就能夠了。後端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。