1. 首頁 > 生活百科 > >

JSP頁面實現驗證碼校驗

生活百科

目錄

  • 驗證碼校驗分析
  • 生成驗證碼
  • 測試驗證碼
  • 校驗驗證碼
  • 測試驗證碼校驗
  • 添加驗證碼刷新
在網頁頁面的使用中為防止“非人類”的大量操作和防止一些的信息冗余，增加驗證碼校驗是許多網站常用的方式 。
而讓用戶輸入字母和數字組合的驗證碼是最經典也是最常用的方式 。這一篇是純利用現有JDK提供的繪圖類(ImageIO)類制作,這個過程比較復雜且需要了解ImageIO類 。
今天發布的第二篇文章是利用Hutool工具類來實現的，該工具類已經封裝驗證碼所需的相關類等 ， 使用起來較為簡單和方便 。
驗證碼的生成和校驗過程均使用Servlet和JSP的結合來實現，Servlet的相關內容可以參閱Servlet技術
如何利用基礎的JSP知識來實現網頁的驗證碼校驗呢？
驗證碼校驗分析首先要驗證碼的校驗的過程 。
驗證碼校驗分為三部分：
  1. 生成驗證碼
  2. 獲取用戶輸入的驗證碼
  3. 判斷驗證碼是否輸入正確
驗證碼的生成實際就是輸出一個圖像，所以在這里使用ImageIO來生成圖片 ， 然后結合使用隨機數（Random）來實現隨機生成驗證上的內容 ， 最后進而展示出來，然后利用Session對象存儲驗證碼的內容 。在用戶輸入驗證碼的時候可以用request來獲取用戶輸入的內容，讓其余Session對象中保存的驗證碼內容進行比較，若一致則驗證成功，不一致就驗證失敗 。
生成驗證碼先創建一個圖片的緩沖區：
BufferedImage bi=new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);創建畫布：
Graphics g=bi.getGraphics();創建顏色：
Color c=new Color(200,150,255);創建背景顏色：
g.setColor(c);填充矩形：
g.fillRect(0, 0, 68,22);將要顯示的驗證碼內容組成元素存入字符串數組：
char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();創建隨機的驗證碼內容：
Random r=new Random();int len=ch.length;int index; //index用于存放隨機數字StringBuffer sb=new StringBuffer();for(int i=0;i<4;i++){index=r.nextInt(len);//產生隨機數字g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));//設置顏色g.drawString(ch[index]+"",(i*15)+3, 18);//畫數字以及數字的位置sb.append(ch[index]);}將驗證碼的內容存入Session及顯示在頁面上：
request.getSession().setAttribute("piccode",sb.toString()); ImageIO.write(bi, "JPG", response.getOutputStream());完整代碼：
public class ImageServletextends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);//創建圖像緩沖區Graphics g = bi.getGraphics(); //通過緩沖區創建一個畫布Color c = new Color(200, 150, 255); //創建顏色g.setColor(c);//為畫布創建背景顏色g.fillRect(0, 0, 68, 22); //填充矩形char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//轉化為字符型的數組Random r = new Random();int len = ch.length;int index; //index用于存放隨機數字StringBuffer sb = new StringBuffer();for (int i = 0; i < 4; i++) {index = r.nextInt(len);//產生隨機數字g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));//設置顏色g.drawString(ch[index] + "", (i * 15) + 3, 18);//畫數字以及數字的位置sb.append(ch[index]);}request.getSession().setAttribute("piccode", sb.toString());ImageIO.write(bi, "JPG", response.getOutputStream());}}測試驗證碼在測試之前需要先在web.xml文件中配置一下：
<servlet><servlet-name>ImageServlet</servlet-name><servlet-class>com.kailong.servlet.ImageServlet</servlet-class></servlet><servlet-mapping><servlet-name>ImageServlet</servlet-name><url-pattern>/imageServlet</url-pattern></servlet-mapping>啟動服務器后在瀏覽器中輸入http://localhost:8080/工程名/imageServlet即可
JSP頁面實現驗證碼校驗

文章插圖

JSP頁面實現驗證碼校驗

文章插圖
驗證碼的生成已經實現成功，下面實現驗證驗證碼的Servlet 。
校驗驗證碼先新建一個jsp用戶界面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>登錄界面</title></head><body><form action="<%= request.getContextPath()%>/loginServlet" method="get" >驗證碼:<inputtype="text" name="checkCode"/><br/><img alt="驗證碼" id="imagecode" src="http://img.zhejianglong.com/231018/115IWF6-2.jpg"/><input type="submit" value="https://www.huyubaike.com/biancheng/提交"></form></body></html>

推薦閱讀