生成验证码

发表于 2019-07-06更新于 2019-07-06阅读次数

验证码功能的实现

1 JSP版数字验证码
  • 在生成验证码图片的时候，同时会生成一个session，其值就是验证码图片中的数字。同时，提供输入框让用户输入，提交输入后，与已有的session值进行比较，根据比较结果作相应的判断。

    1.1 编写放置验证码的页面：login.jsp

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <script>
            function loadimage(){
                document.getElementById("randImage").src="image.jsp?"+Math.random();
            }
        </script>
    </head>
    <body>
        <table width="256" border="0" cellpadding="0" cellspacing="0">
            <!-- DWLayoutTable -->
            <form action="validate.jsp" method="post" name="loginForm">
                <tr>
                    <td width="118" height="22" valign="middle"  align="center">
                        <input type="text" name="rand" size="15">
                    </td>
                    <td width="138" valign="middle" align="center">
                        <img alt="code..." name="randImage" id="randImage" src="image.jsp" width="60" height="20"/>
                    </td>
                </tr>
                <tr>
                    <td height="36" colspan="2" align="center" valign="middle">
                        <a href="javascript:loadimage();"><font class="pt95">看不清点我</font></a>
                    </td>	
                </tr>
                <tr>
                    <td height="36" colspan="2" align="center" valign="middle">
                        <input type="submit" name="login" value="提交">
                    </td>	
                </tr>
            </form>
        </table>
    </body>
    </html>

1.2 编写产生验证码的页面：image.jsp 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.awt.Font"%>
<%@page import="java.awt.Graphics"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="java.util.Random"%>
<%@page import="java.awt.Color"%>
<%@ page language="java" contentType="image/jpeg; charset=UTF-8"%>
<%!
    Color getRandColor(int fc,int bc){
        Random random=new Random();
        if(fc > 255){
            fc=255;
        }
        if(bc > 255){
            bc=255;
        }
        int r=fc + random.nextInt(bc-fc);
        int g=fc + random.nextInt(bc-fc);
        int b=fc + random.nextInt(bc-fc);
        return new Color(r,g,b);
    } 
%>
<%
    try{
        response.setHeader("Pragma","No-cache");
        response.setHeader("Cache-Control","no-cache");
        response.setDateHeader("Expires",0);
        int width=60,height=20;
        //建立BufferedImage对象。指定图片的宽度个色彩
        BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        OutputStream os=response.getOutputStream();
        //取得Graphics对象，用来绘制图片
        Graphics g=image.getGraphics();
        //绘制图片背景加颜色，释放Graphics对象所占资源
        Random random=new Random();
        g.setColor(getRandColor(200,250));
        g.fillRect(0,0,width,height);
        
        g.setFont(new Font("Times New Roman",Font.PLAIN,18));
        g.setColor(getRandColor(160,200));
        
        for(int i=0;i<255;i++){
            int x=random.nextInt(width);
            int y=random.nextInt(height);
            int x1=random.nextInt(12);
            int y1=random.nextInt(12);
            g.drawLine(x,y,x+x1,y+y1);
        }
        
        String sRand="";
        for(int i=0;i<4;i++){
            String rand=String.valueOf(random.nextInt(10));
            sRand += rand;
            g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
            g.drawString(rand,13*i+6,16);
        }
        session.setAttribute("rand",sRand);
        g.dispose();
        //通过ImageIO对象的write静态方法将图片输出
        ImageIO.write(image,"JPEG",os);
        //知道了图片的生成方法，剩下的问题是如何将随机数生成到也页面上。要显示图片，
        //只要将生成的图片流返回response对象，这样用户请求的时候就可以得到图片。
        //如果contentType="image/JPEG"
        //页面的page参数的contentType属性可以指定返回的response对象的形式
        os.flush();
        os.close();
        os = null;
        response.flushBuffer();
        out.clear();
        out = pageContext.pushBody();
    }catch(Exception e){
        System.out.println(e.getMessage());
        e.printStackTrace();
    }
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生成验证码</title>
</head>
<body>

</body>
</html>
2 JSP版英文与数字混合验证码

  • login.jsp

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <script>
            function loadimage(){
                document.getElementById("randImage").src="image2.jsp?"+Math.random();
            }
        </script>
    </head>
    <body>
        <table width="256" border="0" cellpadding="0" cellspacing="0">
            <!-- DWLayoutTable -->
            <form action="validate.jsp" method="post" name="loginForm">
                <tr>
                    <td width="118" height="22" valign="middle"  align="center">
                        <input type="text" name="rand" size="15">
                    </td>
                    <td width="138" valign="middle" align="center">
                        <img alt="code..." name="randImage" id="randImage" src="image.jsp" width="60" height="20"/>
                    </td>
                </tr>
                <tr>
                    <td height="36" colspan="2" align="center" valign="middle">
                        <a href="javascript:loadimage();"><font class="pt95">看不清点我</font></a>
                    </td>	
                </tr>
                <tr>
                    <td height="36" colspan="2" align="center" valign="middle">
                        <input type="submit" name="login" value="提交">
                    </td>	
                </tr>
            </form>
        </table>
    </body>
    </html>

  • image2.jsp

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    <%@page import="javax.imageio.ImageIO"%>
    <%@page import="java.awt.Font"%>
    <%@page import="java.awt.Graphics"%>
    <%@page import="java.io.OutputStream"%>
    <%@page import="java.awt.image.BufferedImage"%>
    <%@page import="java.awt.Color"%>
    <%@page import="java.util.*"%>
    <%@ page language="java" contentType="image/jpeg; charset=UTF-8"%>
    <%!
        Color getRandColor(int fc,int bc){
            Random random=new Random();
            if(fc > 255){
                fc=255;
            }
            if(bc > 255){
                bc=255;
            }
            int r=fc + random.nextInt(bc-fc);
            int g=fc + random.nextInt(bc-fc);
            int b=fc + random.nextInt(bc-fc);
            return new Color(r,g,b);
        } 
    %>
    <%
        try{
            response.setHeader("Pragma", "No-cache");
            response.setHeader("Cache-Control","no-cache");
            response.setDateHeader("Expires", 0);
            int width=110,height=20;
            //建立BufferedImage对象,指定图片的宽度和高度和色彩
            BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
            OutputStream os=response.getOutputStream();
            //取得Graphics对象
            Graphics g=image.getGraphics();
            //绘制图片背景加颜色，释放Graphics对象所占资源
            Random random=new Random();
            g.setColor(getRandColor(200, 250));
            g.fillRect(0, 0, width, height);
            
            g.setFont(new Font("Times New Roman",Font.PLAIN,18));
            g.setColor(getRandColor(160,200));
            
            for(int i=0;i<255;i++){
                int x=random.nextInt(width);
                int y=random.nextInt(height);
                int x1=random.nextInt(12);
                int y1=random.nextInt(12);
                
                g.drawLine(x,y,x1,y1);
            }
            String[] s={"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"}; 
            String sRand="";
            for(int i=0;i<4;i++){
                String rand="";
                if(random.nextBoolean()){
                    rand+=String.valueOf(random.nextInt(10));
                }else{
                    int index=random.nextInt(25);
                    rand+=s[index];
                }
                sRand=rand;
                g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
                g.drawString(rand,17*i+6,16);
            }
            session.setAttribute("rand", sRand);
            g.dispose();
            ImageIO.write(image,"JPEG",os);
            os.flush();
            os.close();
            os = null;
            response.flushBuffer();
            out.clear();
            out =pageContext.pushBody();
        }catch(Exception e){
            System.out.println(e.getMessage());
            e.printStackTrace();
        }
            
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>验证码2</title>
    </head>
    <body>

    </body>
    </html>

以上内容大部分都是参考一本书叫做《软件开发 JSP》，感谢作者!!!!