1.在jsp頁面用js生成驗證碼並保存在變量中,驗證碼作為參數傳到java(繼承了HttpServlet)類

2.根據jsp頁面中傳過來的驗證碼畫出一個有幹擾線或幹擾點的圖片

3.在WEB-INF/web.xml中配置 servlet

4.在jsp頁面調用配置好的servlet,一般是通過<img src="servlet名" id="code"/>調用

5.提交數據之前驗證

 

<form onsubmit="return validate();"....../>



 

局部刷新驗證碼:<a href="#" onclick="javascript:show();return false;">看不清,換一張!</a>-----return false;很重要啊

 

 
  1. package com.zou.servlet;  
  2. import java.awt.Color;  
  3. import java.awt.Font;  
  4. import java.awt.Graphics;  
  5. import java.awt.image.BufferedImage;  
  6. import java.io.IOException;  
  7. import java.util.Random;  
  8.   
  9. import javax.servlet.ServletException;  
  10. import javax.servlet.http.HttpServlet;  
  11. import javax.servlet.http.HttpServletRequest;  
  12. import javax.servlet.http.HttpServletResponse;  
  13. //import javax.servlet.http.HttpSession;  
  14. import com.sun.image.codec.jpeg.JPEGCodec;  
  15. import com.sun.image.codec.jpeg.JPEGImageEncoder;  
  16. @SuppressWarnings("serial")  
  17. public class CodeServlet extends HttpServlet {  
  18.     /** 
  19.      * 產生驗證碼圖片 
  20.      */  
  21.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  22.             throws ServletException, IOException {  
  23.         response.setContentType("image/jpeg");  
  24.         response.setHeader("Cache-Control""no-cache");  
  25.         response.setHeader("Pragma""No-cache");  
  26.         response.setDateHeader("Expires", 0L);  
  27.         //HttpSession session = request.getSession(true);  
  28.         int width = 80;  
  29.         int height = 30;  
  30.         BufferedImage image = new BufferedImage(width, height, 1);  
  31.         Graphics g = image.getGraphics();  
  32.         Random random = new Random();  
  33.         g.setColor(getRandColor(200250));  
  34.         g.fillRect(00, width, height);  
  35.         g.setFont(new Font("Arial"025));  
  36.         g.setColor(getRandColor(160200));  
  37.         for (int i = 0; i < 155; i++) {  
  38.             int x = random.nextInt(width + 100);  
  39.             int y = random.nextInt(height + 100);  
  40.             int xl = random.nextInt(10);  
  41.             int yl = random.nextInt(12);  
  42.             g.drawOval(x, y, x + xl, y + yl);  
  43.         }  
  44.         String code = request.getParameter("code");  
  45.         //System.out.println(code);  
  46.         String sRand=code;  
  47.         for (int i = 0; i < sRand.length(); i++) {  
  48.             //String rand = getRandChar(random.nextInt(36));  
  49.             String rand = sRand.substring(i, i+1);  
  50.             //sRand = sRand + rand;  
  51.             g.setColor(new Color(20 + random.nextInt(110), 20 + random  
  52.                     .nextInt(110), 20 + random.nextInt(110)));  
  53.             g.drawString(rand, 14 * i + 525);  
  54.         }  
  55.         //session.setAttribute("rand", sRand);  
  56.         //request.setAttribute("rand", sRand);  
  57.         g.dispose();  
  58.         javax.servlet.ServletOutputStream imageOut = response.getOutputStream();  
  59.         JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(imageOut);  
  60.         encoder.encode(image);  
  61.     }  
  62.     private Color getRandColor(int fc, int bc) {  
  63.         Random random = new Random();  
  64.         if (fc > 255)  
  65.             fc = 255;  
  66.         if (bc > 255)  
  67.             bc = 255;  
  68.         int r = fc + random.nextInt(bc - fc);  
  69.         int g = fc + random.nextInt(bc - fc);  
  70.         int b = fc + random.nextInt(bc - fc);  
  71.         return new Color(r, g, b);  
  72.     }  
  73.   
  74. /*  private String getRandChar(int randNumber) { 
  75.         return CHARARRAY[randNumber]; 
  76.     }*/  
  77.     //private static final String CONTENT_TYPE = "image/jpeg";  
  78. /*  private static final String CHARARRAY[] = { "0", "1", "2", "3", "4", "5", 
  79.             "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", 
  80.             "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", 
  81.             "w", "x", "y", "z" };*/  
  82.     }  

web.xml

 

[xhtml] view plaincopy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.   <welcome-file-list>  
  8.     <welcome-file>index.jsp</welcome-file>  
  9.   </welcome-file-list>  
  10.     <servlet>   
  11.         <servlet-name>code</servlet-name>   
  12.         <servlet-class>com.zou.servlet.CodeServlet</servlet-class>   
  13.     </servlet>    
  14.   <servlet-mapping>  
  15.     <servlet-name>code</servlet-name>  
  16.     <url-pattern>/codeServlet</url-pattern>  
  17.   </servlet-mapping>  
  18. </web-app>  

 

 

index.jsp

 

[java] view plaincopy
 
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.     <head>  
  5.         <title>驗證碼測試</title>  
  6. <mce:script language="javascript" type="text/javascript"><!--  
  7. var code ; //在全局 定義驗證碼  
  8. function createCode()  
  9. {  
  10.     code = "";  
  11.     var codeLength = 5;//驗證碼的長度  
  12.     //所有候選組成驗證碼的字符,可以用中文  
  13.     var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');  
  14.     for(var i=0;i<codeLength;i++)  
  15.     {  
  16.         var charIndex = Math.floor(Math.random()*60);  
  17.         code +=selectChar[charIndex];  
  18.     }  
  19.     return code;  
  20. }  
  21. function validate ()  
  22. {  
  23.     var inputCode = document.getElementById("vcode").value.toLowerCase();  
  24.     if(inputCode.length <=0)  
  25.     {  
  26.         alert("請輸入驗證碼!");  
  27.         return false;  
  28.     }  
  29.     else if(inputCode != code.toLowerCase())  
  30.     {  
  31.         alert("驗證碼輸入錯誤!");  
  32.         show();//刷新驗證碼  
  33.         return false;  
  34.     }  
  35.     else  
  36.     {  
  37.         alert("^-^ OK");  
  38.         return true;  
  39.     }  
  40. }  
  41. function show(){  
  42.         //顯示驗證碼  
  43.         document.getElementById("code").src="codeServlet?code="+createCode();  
  44. }  
  45. window.onload = function() {//document.onload=show();  
  46.         show();//頁面加載時加載驗證碼  
  47.         //這時無論在ie還是在firefox中,js沒有加載完,頁面的東西是不會被執行的;  
  48.     }  
  49.       
  50. // --></mce:script>          
  51.     </head>  
  52.     <body>  
  53.             <form onsubmit="return validate();" action="" method="post">  
  54.                             <h3>jsp+js+servlet實現驗證碼</h3><br/>  
  55.                             用戶名:<input type="text" name=""/><br/>  
  56.                             請輸入驗證碼:  
  57.                             <input type="text" id="vcode" style="width: 60;" maxLength="5" />  
  58.                                
  59.                             <img src="" id="code"/>  
  60.                             <a href="#" mce_href="#"  
  61.                             onclick="javascript:show();return false;">看不清,換一張!</a>  
  62.                             <br/>  
  63.                             <input type="submit"/>  
  64.             </form>  
  65.     </body>  
  66. </html> 

 

arrow
arrow
    全站熱搜

    戮克 發表在 痞客邦 留言(0) 人氣()