登錄界面如何加入驗證碼

1、在用戶登錄界面如何加入驗證碼,以及實現功能:

首先在myeclipse10中建立web應用程序結構如下:

           

 在WebRoot下面導入Random.jsp文件,其代碼如下:
 
  1. <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %> 
  2. <html> 
  3. <body> 
  4. <%!  
  5.      
  6.    Color getRandColor(int fc,int bc){  
  7.        Random r=new Random();  
  8.        if(fc>255) fc=255;  
  9.        if(bc>255) bc=255;  
  10.        int red=fc+r.nextInt(bc-fc);  
  11.        int green=fc+r.nextInt(bc-fc);  
  12.        int blue=fc+r.nextInt(bc-fc);  
  13.        return new Color(red,green,blue);  
  14.    }  
  15.      
  16.  %> 
  17.  <%  
  18.     response.setHeader("Pragma","No-cache");  
  19.     response.setHeader("Cache-Control","No-cache");  
  20.     response.setHeader("Expires","0");  
  21.       
  22.       
  23.     Random r=new Random();  
  24.       
  25.     int width=60,height=20;  
  26.     BufferedImage pic=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);  
  27.       
  28.     Graphics gc=pic.getGraphics();  
  29.       
  30.     gc.setColor(getRandColor(200,250));  
  31.     gc.fillRect(0,0,width,height);  
  32.       
  33.    gc.setFont(new Font("Times New Roman",Font.PLAIN,18));  
  34.      
  35.    gc.setColor(getRandColor(160,200));  
  36.    for(int i=0;i<200;i++){  
  37.       int x1=r.nextInt(width);  
  38.       int x2=r.nextInt(height);  
  39.       int x3=r.nextInt(15);  
  40.       int x4=r.nextInt(15);  
  41.       gc.drawLine(x1,x2,x1+x3,x2+x4);  
  42.    }  
  43.      
  44.       gc.setColor(getRandColor(120,240));  
  45.       for(int j=0;j<100;j++){  
  46.           int x=r.nextInt(width);  
  47.           int y=r.nextInt(height);  
  48.           gc.drawOval(x,y,0,0);  
  49.       }  
  50.      
  51.       String rs="";  
  52.       String rn="";  
  53.       for(int k=0;k<4;k++){  
  54.          rn=String.valueOf(r.nextInt(10));  
  55.          rs+=rn;  
  56.         
  57.          gc.setColor(new Color(20+r.nextInt(110),r.nextInt(110),20+r.nextInt(110)));  
  58.          gc.drawString(rn,13*k+6,16);  
  59.         
  60.       }  
  61.       gc.dispose();  
  62.      
  63.       session.setAttribute("random",rs);  
  64.      
  65.      
  66.       ImageIO.write(pic,"JPEG",response.getOutputStream());  
  67.       out.clear();  
  68.       out=pageContext.pushBody();  
  69.   %> 
  70. </body> 
  71. </html> 

然後建立登錄文件login.jsp,在其中加入如下代碼:

 

  1. <input type="text" name="random" />  
  2.            <img name="randImage" id="randImage" src="Random.jsp" border="2"  />  
  3.              
  4.            <a href="javascript:loadimage();"><font size=3>換一張</font></a>  
  5.             <%-- 調用js,中的loadimage()方法,實現驗證碼,隨即換。 --%> 

所調用的js代碼如下:

 

  1. <script language="javascript">  
  2.    function loadimage(){   
  3.       document.getElementById("randImage").src = "Random.jsp?"+Math.random();   
  4.    }   
  5. </script> 

這是實現單擊--->換一張,驗證碼自動調換,如下圖所示:

 

 

其次:在登錄的LoginServlet.java中,接收並判斷驗證碼是否正確,相關代碼顯示如下:

 

  1. //檢驗驗證碼  
  2.                 try{  
  3.                     random=request.getParameter("random");//自己輸入的隨機驗證碼  
  4.                     String ran=(String)session.getAttribute("random");//得到Random.jsp中的隨機驗證碼  
  5.                     if(!random.equals(ran)){  
  6.                         String s="<script language='javascript'>alert('驗證碼輸入錯誤!!');window.location.href='login.jsp'</script>";  
  7.                         out.print(s);  
  8.                         return;  
  9.                     }     
  10.                 }catch(Exception e){  
  11.                     System.out.println("LoginServlet.java中,檢驗驗證碼拋出異常!");  
  12.                     e.printStackTrace();  
  13.                 } 

第一個得到的random是自己從文本框中輸入的隨機驗證碼,第二個ran是從Random.jsp頁面中 得到的,可以從Random.jsp代碼看出來

 

  1. gc.dispose();  
  2.  
  3. session.setAttribute("random",rs);  
  4. ImageIO.write(pic,"JPEG",response.getOutputStream());  
  5. out.clear();  
  6. out=pageContext.pushBody();  

至此,在寫下相關登錄驗證代碼,即可完成相應的驗證碼登錄操作,感覺灰爽,可以試下哦!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章