jsp頁面動態生成驗證碼
阿新 • • 發佈：2019-02-02
在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>
根據個人喜好可以設定點選更換