當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JSP教程（八）—— Servlet实现验证码
生活随笔
收集整理的這篇文章主要介紹了
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類
1.4? 校驗驗證碼是否正確
LoginServlet類
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服务器热部
- 下一篇： 使用WeUI+JS 的label包含in