如何在登錄頁面生成驗證碼圖像,並點擊後刷新驗證碼

    這兩天在學習java web時,做一個練習題上要求自己實現一個登錄驗證,要求在登錄頁面輸入用戶名、密碼還有驗證碼,提交後再後臺進行驗證。如果輸入全部正確,則跳轉頁面進入系統,如果錯誤則提示重新輸入。登錄頁面比較好做,就是JSP頁面並使用表單,主要是驗證碼圖像的生成和刷新,有難度。驗證碼圖像生產的代碼如下:

image.jsp

<%-- 顯示驗證碼提示 --%>
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="GBK"%>
<%!
Color getRandColor(int fc,int bc){   // 給定範圍獲得隨機顏色
        Random random = new Random();
        if (fc > 255) fc = 255;
        if (bc > 255) bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc+random.nextInt(bc - fc);
        int b = fc+random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
%>
<%
//設置頁面不緩存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);

// 在內存中創建圖象
// 通過這裏可以修改圖片大小
int width = 80, height = 25;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 獲取圖形上下文
// g相當於筆
Graphics g = image.getGraphics();

//生成隨機類
Random random = new Random();

// 設定背景色
g.setColor(getRandColor(200,250));
// 畫一個實心的長方,作爲背景
g.fillRect(0, 0, width, height);

//設定字體
g.setFont(new Font("宋體", Font.PLAIN,20));

//畫邊框
//g.setColor(new Color());
//g.drawRect(0, 0, width-1, height-1);


// 隨機產生155條幹擾線,使圖象中的認證碼不易被其它程序探測到
g.setColor(getRandColor(160,200));
for (int i = 0; i < 155; i++) {
    int x = random.nextInt(width);
    int y = random.nextInt(height);
    int xl = random.nextInt(12);
    int yl = random.nextInt(12);
    g.drawLine(x, y, x + xl, y + yl);
}

// 取隨機產生的認證碼(4位數字)
//String rand = request.getParameter("rand");
//rand = rand.substring(0,rand.indexOf("."));
String sRand="";
// 如果要使用中文,必須定義字庫,可以使用數組進行定義
// 這裏直接寫中文會出亂碼,必須將中文轉換爲unicode編碼
String[] str = {"A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","m","n","p","s","t","u","v","w","x","y","z","1","2","3","4","5","6","7","8","9"} ;


for (int i = 0; i < 4; i++){
    String rand = str[random.nextInt(str.length)];
    sRand += rand;
    // 將認證碼顯示到圖象中
    g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20+random.nextInt(110)));//調用函數出來的顏色相同,可能是因爲種子太接近,所以只能直接生成
    g.drawString(rand, 16 * i + 6, 19);
}

// 將認證碼存入SESSION
session.setAttribute("rand", sRand);


// 圖象生效
g.dispose();

// 輸出圖象到頁面
ImageIO.write(image, "JPEG", response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%> 

    以上是生成驗證碼圖像的通用代碼,然後在登錄頁面中使用<img src="request.getContextPath()/image.jsp">標籤即可顯示驗證碼圖像。接下來就是如何在點擊驗證碼(或文字“換一個”)時刷新驗證碼內容,也就是重新調用image.jsp頁面。如果是重複給img.src屬性賦值"this.getContextPath()/image.jsp"是不行的。後來在網上查了下才知道,方法很簡單,就是給img.src屬性重複賦值時傳入一個參數,傳什麼都可以,字符串或數字都行。我們可以傳入一個隨機數Math.random()。先定義js函數:

<script language="javascript">

    function renovate(img) {

        img.src = img.src + "?" + Math.random();    // 傳入參數時,可以不定義參數名稱

    }

</script>

然後加入onClick事件,<img src="this.getContextPath()/image.jsp" onClick="renovate(this)">,這樣在點擊驗證碼時,就可以實現刷新驗證碼內容的目的。我們也可以在驗證碼旁邊定義一個“看不清,換一個”的超鏈接,給超鏈接添加onClick事件,當點擊超鏈接時調用js函數,刷新驗證碼,具體方法和上面是一樣的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章