jsp使用servlet實現驗證碼

在進行表單設計中，驗證碼的增加恰恰可以實現是否為“人為”操作，增加驗證碼可以防止網站數據庫信息的冗雜等...

現在，小編將講述通過servlet實現驗證碼：

驗證碼作為一個圖片，在頁面中為“畫”出來的，它是如何畫出來的呢？

<生成圖片>

{

　　生成圖片的類：

　　1.BufferedImage圖像數據緩沖區

　　2.Graphics繪制圖片

　　3.color獲取顏色

　　4.Random獲取隨機數

　　5.ImageIO輸出圖片

}

///////////////////////////////////////////////////////////////////////////

<生成驗證碼圖片>

1.在index.jsp中寫入以下代碼

  <form action="<%= request.getContextPath()%>/servlet/LoginServlet" method="get" >
    驗證碼:<input  type="text" name="checkCode"/>
    <img alt="驗證碼" id="imagecode" src="<%= request.getContextPath()%>/servlet/ImageServlet"/>
    <a href="javascript:reloadCode();">看不清楚</a><br>
    <input type="submit" value="提交">
    </form>

2.在src中創建ImageServlet類

public class ImageServlet  extends 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); //fillRect:填充指定的矩形
         
         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()); //將數字保留在session中，便於后續的使用
         ImageIO.write(bi, "JPG", response.getOutputStream()); 
    }

3.在WEB-INF進行配置文件

<servlet>
        <servlet-name>ImageServlet</servlet-name>
        <servlet-class>code.sam.ImageServlet</servlet-class>
</servlet>

<servlet-mapping>
        <servlet-name>ImageServlet</servlet-name>
        <url-pattern>/servlet/ImageServlet</url-pattern>
</servlet-mapping>

------華麗分割線-------

<輸入信息與圖片中的數字進行校驗>

1.創建LoginServlet類

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");  //取值
        //checkCode=checkCode.toUpperCase();  //把字符全部轉換為大寫的（此語句可以用於驗證碼不區分大小寫）
        response.setContentType("text/html;charset=gbk");//解決亂碼問題
        PrintWriter out=response.getWriter();
        if(checkCode.equals(piccode))
        {
            out.println("驗證碼輸入正確！");
        }
        else
        {
            out.println("驗證碼輸入錯誤！！！");
        }
        out.flush();//將流刷新
        out.close();//將流關閉
    }

2.配置WEB-INF

    <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>code.sam.LoginServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/servlet/LoginServlet</url-pattern>
    </servlet-mapping>

------華麗分割線-----

在點擊頁面中的看不清楚時，需要進行刷新，在頁面中書寫一段JS代碼

    function reloadCode()
    {
        var time=new Date().getTime();
        document.getElementById("imagecode").src="<%= request.getContextPath()%>/servlet/ImageServlet?d="+time;
    }

****************************************************

代碼全部完成

結果如下圖***