當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JSP教程（八）—— Servlet实现验证码

發布時間：2024/4/17 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JSP教程（八）—— Servlet实现验证码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1? 實現步驟

1.1? 驗證碼基本概念

驗證碼包含兩部分：

輸入框
顯示驗證碼的圖片

網頁顯示驗證碼：

1 <input type="text id="verifyCode" name="verifyCode" size="6"/> 1 <img alt="驗證碼" id="safecode" src="<%=request.getComtextPath()%>/servlet/ImageServlet">

1.2? 生成圖片

生成圖片用到的類

BufferedImage圖像數據緩沖區
Graphice繪制圖片
Color獲取顏色
Random生成隨機數
ImageIO輸出圖片

1.3? 生成圖片的實現類

ImageServlet類

定義BufferedImage對象

獲得Graphice對象

通過Random產生隨機驗證碼信息

使用Graphice繪制圖片

記錄驗證碼信息到session中

使用ImageIO輸出圖片

1.4? 校驗驗證碼是否正確

LoginServlet類

獲取頁面驗證碼

獲取session保存的驗證碼

比較驗證碼

返回校驗結果

2? 代碼實現

注意：需要將相關jar包導入項目

主頁面代碼（index.jsp）

1 <script type="text/javascript"> 2 function reloadCode(){ 3 var time = new Date().getTime(); 4 document.getElementById("imagecode").src="<%=request.getContextPath() %>/servlet/ImageServlet?d="+time; 5 } 6 </script> 1 <body> 2 <form action="<%=request.getContextPath() %>/servlet/LoginServlet" method="get"> 3 驗證碼：<input type="text" name="checkcode"/> 4 <img alt="驗證碼" id="imagecode" src="<%=request.getContextPath() %>/servlet/ImageServlet"/> 5 <a href="javascript: reloadCode();">看不清楚</a><br> 6 <input type="submit" value="提交"> 7 </form> 8 </body>

生成圖片的Java代碼

1 package com.muke; 2 3 import java.awt.Color; 4 import java.awt.Graphics; 5 import java.awt.image.BufferedImage; 6 import java.io.IOException; 7 import java.util.Random; 8 import javax.imageio.ImageIO; 9 import javax.servlet.http.HttpServlet; 10 import javax.servlet.http.HttpServletRequest; 11 import javax.servlet.http.HttpServletResponse; 12 13 public class ImageServlet extends HttpServlet { 14 15 /** 16 * 17 */ 18 private static final long serialVersionUID = 1L; 19 20 public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException{ 21 BufferedImage bi = new BufferedImage(68,22,BufferedImage.TYPE_INT_RGB);//長度，寬度，圖片類型 22 Graphics g = bi.getGraphics();//畫一個圖片 23 Color c = new Color(200,150,255);//定義背景顏色 24 g.setColor(c); 25 g.fillRect(0, 0, 68, 22);//背景框（坐標） 26 27 char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//把字母和數字全部列出來 28 Random r = new Random();//隨機數類 29 int len=ch.length,index;//獲取數組長度和index隨機數 30 StringBuffer sb = new StringBuffer();//保存隨機字符的一個類 31 for(int i=0; i<4; i++){//取四位隨機數 32 index = r.nextInt(len);//獲取一個隨機數（數組長度范圍之內） 33 g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));//隨機獲得一個顏色 34 g.drawString(ch[index]+"", (i*15)+3, 18);//把字符畫到圖片上//字符 x坐標 y坐標 35 sb.append(ch[index]);//保存隨機字符 36 } 37 request.getSession().setAttribute("piccode", sb.toString()); 38 ImageIO.write(bi, "JPG", response.getOutputStream());//輸出//對象類型輸出位置 39 } 40 }

驗證輸入的Java代碼

1 package com.muke; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 public class LoginServlet extends HttpServlet{ 10 11 /** 12 * 13 */ 14 private static final long serialVersionUID = 1L; 15 16 public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException{ 17 18 String piccode = (String) request.getSession().getAttribute("piccode"); 19 String checkcode = request.getParameter("checkcode"); 20 checkcode = checkcode.toUpperCase(); 21 response.setContentType("text/html;charset=gbk"); 22 PrintWriter out = response.getWriter(); 23 if(checkcode.equals(piccode)){ 24 out.println("驗證碼輸入正確！"); 25 }else{ 26 out.println("驗證碼輸入錯誤！！！"); 27 } 28 out.flush(); 29 out.close(); 30 } 31 }

配置文件（web.xml）

1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="2.4" 3 xmlns="http://java.sun.com/xml/ns/j2ee" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 6 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 7 8 <servlet> 9 <servlet-name>ImageServlet</servlet-name> 10 <servlet-class>com.muke.ImageServlet</servlet-class> 11 </servlet> 12 <servlet> 13 <servlet-name>LoginServlet</servlet-name> 14 <servlet-class>com.muke.LoginServlet</servlet-class> 15 </servlet> 16 <servlet-mapping> 17 <servlet-name>ImageServlet</servlet-name> 18 <url-pattern>/servlet/ImageServlet</url-pattern> 19 </servlet-mapping> 20 <servlet-mapping> 21 <servlet-name>LoginServlet</servlet-name> 22 <url-pattern>/servlet/LoginServlet</url-pattern> 23 </servlet-mapping> 24 25 <welcome-file-list> 26 <welcome-file>index.jsp</welcome-file> 27 </welcome-file-list> 28 </web-app>

完整代碼在https://pan.baidu.com/s/1kW8w4tD。

3? 結果輸出

轉載于:https://www.cnblogs.com/qijunhui/p/8453841.html

總結

以上是生活随笔為你收集整理的JSP教程（八）—— Servlet实现验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： eclipse关闭tomcat服务器热部
下一篇： Docker端口映射实现