文章詳情頁

JSP頁面實現(xiàn)驗證碼校驗功能

瀏覽：191日期：2022-06-07 17:21:01

驗證碼校驗分析

首先要驗證碼的校驗的過程。

驗證碼校驗分為三部分：

生成驗證碼
獲取用戶輸入的驗證碼
判斷驗證碼是否輸入正確

驗證碼的生成實際就是輸出一個圖像，所以在這里使用ImageIO來生成圖片，然后結(jié)合使用隨機數(shù)（Random）來實現(xiàn)隨機生成驗證上的內(nèi)容，最后進(jìn)而展示出來，然后利用Session對象存儲驗證碼的內(nèi)容。在用戶輸入驗證碼的時候可以用request來獲取用戶輸入的內(nèi)容，讓其余Session對象中保存的驗證碼內(nèi)容進(jìn)行比較，若一致則驗證成功，不一致就驗證失敗。

生成驗證碼

先創(chuàng)建一個圖片的緩沖區(qū)：

BufferedImage bi=new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);

創(chuàng)建畫布：

Graphics g=bi.getGraphics();

創(chuàng)建顏色：

Color c=new Color(200,150,255);

創(chuàng)建背景顏色：

g.setColor(c);

填充矩形：

g.fillRect(0, 0, 68,22);

將要顯示的驗證碼內(nèi)容組成元素存入字符串?dāng)?shù)組：

char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();

創(chuàng)建隨機的驗證碼內(nèi)容：

Random r=new Random(); int len=ch.length; int index; //index用于存放隨機數(shù)字 StringBuffer sb=new StringBuffer(); for(int i=0;i<4;i++) {     index=r.nextInt(len);//產(chǎn)生隨機數(shù)字     g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));  //設(shè)置顏色     g.drawString(ch[index]+"",(i*15)+3, 18);//畫數(shù)字以及數(shù)字的位置     sb.append(ch[index]); }

將驗證碼的內(nèi)容存入Session及顯示在頁面上：

request.getSession().setAttribute("piccode",sb.toString());  ImageIO.write(bi, "JPG", response.getOutputStream());

完整代碼：

public class ImageServlet  extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);//創(chuàng)建圖像緩沖區(qū)Graphics g = bi.getGraphics(); //通過緩沖區(qū)創(chuàng)建一個畫布Color c = new Color(200, 150, 255); //創(chuàng)建顏色g.setColor(c);//為畫布創(chuàng)建背景顏色g.fillRect(0, 0, 68, 22); //填充矩形char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//轉(zhuǎn)化為字符型的數(shù)組Random r = new Random();int len = ch.length;int index; //index用于存放隨機數(shù)字StringBuffer sb = new StringBuffer();for (int i = 0; i < 4; i++) {    index = r.nextInt(len);//產(chǎn)生隨機數(shù)字    g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));  //設(shè)置顏色    g.drawString(ch[index] + "", (i * 15) + 3, 18);//畫數(shù)字以及數(shù)字的位置    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>

啟動服務(wù)器后在瀏覽器中輸入http://localhost:8080/工程名/imageServlet 即可

驗證碼的生成已經(jīng)實現(xiàn)成功，下面實現(xiàn)驗證驗證碼的Servlet。

校驗驗證碼

先新建一個jsp用戶界面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>登錄界面</title></head><body><form action="<%= request.getContextPath()%>/loginServlet" method="get" >    驗證碼:<input  type="text" name="checkCode"/>    <img id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>    <input type="submit" value="提交"></form></body></html>

校驗驗證碼過程：

將生成的驗證碼內(nèi)容保存在Session對象中
獲取用戶輸入的驗證碼內(nèi)容
將兩個內(nèi)容進(jìn)行對照

代碼實現(xiàn)：

獲取Session中的驗證碼內(nèi)容：

String piccode=(String) request.getSession().getAttribute("piccode");

獲取用戶輸入的驗證碼內(nèi)容：

String checkCode=request.getParameter("checkCode");

驗證碼判斷（使用了PrintWriter將相關(guān)內(nèi)容輸出）

response.setContentType("text/html;charset=utf-8");//解決亂碼問題PrintWriter out=response.getWriter();if(checkCode.equals(piccode)){    out.println("驗證碼輸入正確！");}else{    out.println("驗證碼輸入錯誤！?。?);}out.flush();//將流刷新out.close();//將流關(guān)閉

完整代碼：

public class LoginServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException    //用于驗證驗證碼    {String piccode = (String) request.getSession().getAttribute("piccode");String checkCode = request.getParameter("checkCode");response.setContentType("text/html;charset=utf-8");//解決亂碼問題PrintWriter out = response.getWriter();if (checkCode.equals(piccode)) {    out.println("驗證碼輸入正確！");} else {    out.println("驗證碼輸入錯誤?。?！");}out.flush();//將流刷新out.close();//將流關(guān)閉    }}

測試驗證碼校驗

測試前先在web.xml文件中配置一下：

<servlet><servlet-name>LoginServlet</servlet-name><servlet-class>com.kailong.servlet.LoginServlet</servlet-class>    </servlet>    <servlet-mapping><servlet-name>LoginServlet</servlet-name><url-pattern>/loginServlet</url-pattern>    </servlet-mapping>

添加驗證碼刷新

在驗證碼生成之后，用戶在識別的時候可能不能正確識別，這時候就需要刷新一下重新生成。

添加超鏈接實現(xiàn)刷新：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>登錄界面</title>    <script>function reloadCode() {  var time=new Date().getTime();  document.getElementById("imagecode").src="<%= request.getContextPath()%>/imageGenerate?d="+time;}    </script></head><body><form action="<%= request.getContextPath()%>/loginServlet" method="get" >    驗證碼:<input  type="text" name="checkCode"/><br/>    <img id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>    <a href="javascript:reloadCode();" rel="external nofollow"   >看不清楚</a><br>    <br/><input type="submit" value="提交"></form></body></html>

js部分的Date相關(guān)是防止瀏覽器緩存后不能正常刷新，添加時間的唯一性來實現(xiàn)能夠及時刷新和展示。

js 部分可以參閱：JavaScript 語言入門

也可以在ImageServlet中添加防止瀏覽器緩存的語句：

response.setHeader("Pragma", "No-cache");

公眾號本文地址：https://mp.weixin.qq.com/s/XHucabQ_WwUx2OMDGSTMkw
頭條本文地址：https://www.toutiao.com/item/7154265403634926112/

到此這篇關(guān)于JSP頁面實現(xiàn)驗證碼校驗的文章就介紹到這了,更多相關(guān)JSP驗證碼內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！

JSP

上一條：Java之JSP教程九大內(nèi)置對象詳解(上篇)下一條：jsp實現(xiàn)登錄界面

排行榜

					
					解決springboot的aop切面不起作用問題(失效的排查)
Spring Security中的Servlet過濾器體系代碼分析
python中for in的用法詳解
Python判斷變量是否是None寫法代碼實例
IDEA 端口占用的解決方法(推薦)
Docker 拉取鏡像及標(biāo)簽操作 pull | tag
IntelliJ IDEA導(dǎo)入jar包的方法
Python自動重新加載模塊詳解(autoreload module)
uniapp界面新增水印實現(xiàn)示例詳解
一文秒懂java到底是值傳遞還是引用傳遞
PHP中使用FCKeditor2.3.2配置
				