1. 程式人生 > >jsp頁面動態生成驗證碼

jsp頁面動態生成驗證碼

在web專案中登入驗證一般採用驗證碼驗證,根據個人需求將生成驗證碼程式碼放到不同的的地方,可以放到前段控制器中通過請求方式生成驗證碼,也可已將程式碼放到一個JSP頁面通過應用JSP頁面生成驗證碼
<%@ 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>Insert title here</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>

通過應用上面程式碼就可以生成一個驗證碼  在後臺通過獲得session就可以獲得產生的驗證碼 通過比對來驗證登入
在登入介面可以這樣應用 簡單展示一下 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<meta charset="UTF-8">
<title>登入介面</title>
<script src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#loginform_submit").click(function(){
        if(checkInput()){
            
           $("#form1").submit();
        }else{
            return false;
        }
    }
    );
});

function checkInput(){
	var flag = true;
    //判斷使用者名稱
    if($("input[name=username]").val()==null || $("input[name=username]").val()==""){
        alert("使用者名稱不能等於空");
        $("input[name=username]").focus();
        flag =false;
        return ;
    }
    //判斷密碼
    if($("input[name=password]").val()==null || $("input[name=password]").val()==""){
        alert("密碼不能等於空");
        $("input[name=password]").focus();
        flag =false;
        return ;
    }
    //判斷驗證碼
    if($("#validationCode").val()==null || $("#validationCode").val()==""){
        alert("驗證碼不能為空");
        $("#validationCode").focus();
        flag =false;
        return ;
    }
    return flag;
}
</script>
</head>
<body>
    <div id="loginpanelwrap" align="center">
        <div>
            <div>登入</div>
        </div>
        
        <form id="form1" action="LoginServlet" method="post">
        
            <tr>
                   <td> <label>使用者名稱:</label>
                    <input id="username" type="text" name="username" /><br>
              
          			 </td>
          			</tr>
                <label>密碼:</label>
                <input type="password" name="password" id=""/><br>
           
                <label>驗證碼:</label>
                <input type="text" name="validationCode" id="validationCode"/>
                <img id="validationCode_img"  src="validate.jsp"><br>
            <tr>
                <span></span>
                <input type="submit" id="loginform_submit" value="登入" />
            </tr>
       
        </form>
        
    </div>
</body>
</html>

根據個人喜好可以設定點選更換