【验证码】用java写动态验证码 / 通过jsp生成验证码 / 在登录界面显示验证码 / js直接生成验证码并验证

文章目录

用java写动态验证码
通过jsp生成验证码
在登录界面显示验证码
用js直接生成验证码并验证

用java写动态验证码

@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        int width = 100;
        int height = 50;

        //1.创建一对象，在内存中图片(验证码图片对象)
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);


        //2.美化图片
        //2.1 填充背景色
        Graphics g = image.getGraphics();//画笔对象
        g.setColor(Color.PINK);//设置画笔颜色
        g.fillRect(0,0,width,height);

        //2.2画边框
        g.setColor(Color.BLUE);
        g.drawRect(0,0,width - 1,height - 1);

        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
        //生成随机角标
        Random ran = new Random();

        for (int i = 1; i <= 4; i++) {
            int index = ran.nextInt(str.length());
            //获取字符
            char ch = str.charAt(index);//随机字符
            //2.3写验证码
            g.drawString(ch+"",width/5*i,height/2);
        }


        //2.4画干扰线
        g.setColor(Color.GREEN);

        //随机生成坐标点

        for (int i = 0; i < 10; i++) {
            int x1 = ran.nextInt(width);
            int x2 = ran.nextInt(width);

            int y1 = ran.nextInt(height);
            int y2 = ran.nextInt(height);
            g.drawLine(x1,y1,x2,y2);
        }


        //3.将图片输出到页面展示
        ImageIO.write(image,"jpg",response.getOutputStream());


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

通过jsp生成验证码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.awt.image.BufferedImage"%>  
<%@page import="java.awt.Graphics2D"%>  
<%@page import="java.awt.Color"%>  
<%@page import="java.awt.Font"%>  
<%@page import="javax.imageio.ImageIO"%>  
<%@page import="java.util.Random"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证码</title>
</head>
<body>
<%  
    int width = 60;//定义图片的宽度  
    int height = 20;//定义图片的高度  
    // 创建具有可访问图像数据缓冲区的Image  
    BufferedImage buffImg = new BufferedImage(width, height,  
            BufferedImage.TYPE_INT_RGB);  
    Graphics2D g = buffImg.createGraphics();  

    // 创建一个随机数生成器  
    Random random = new Random();  
    //将图像填充为 白色  
    g.setColor(Color.WHITE);  
    g.fillRect(0, 0, width, height);  

    // 创建字体，字体的大小应该根据图片的高度来定  
    Font font = new Font("Times New Roman", Font.PLAIN, 18);  
    // 设置字体  
    g.setFont(font);  

    // 画边框  
    g.setColor(Color.BLACK);  
    g.drawRect(0, 0, width - 1, height - 1);  

    // 随机产生160条干扰线 ,使图像中的验证码不易被其它程序探测到
    g.setColor(Color.LIGHT_GRAY);  
    for (int i = 0; i < 160; 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);  
    }  

    // randomCode 用于保存随机产生的验证码  ，以便用户登陆后进行验证
    StringBuffer randomCode = new StringBuffer();  
    int red = 0, green = 0, blue = 0;  

    // 随机产生4位数字的验证码  
    for (int i = 0; i < 4; i++) {  
        // 得到随机产生的验证码数字  
        String strRand = String.valueOf(random.nextInt(10));  

        // 产生随机的颜色分量来构造颜色值 ，这样输出的每位数字的颜色值都将不同 
        red = random.nextInt(110);  
        green = random.nextInt(50);  
        blue = random.nextInt(50);  

        // 用随机产生的颜色将验证码绘制到图像中  
        g.setColor(new Color(red, green, blue));  
        g.drawString(strRand, 13 * i + 6, 16);  
        //将产生的四个随机数组合在一起
        randomCode.append(strRand);  
    }  

    // 将四位数字的验证码保存到session中  
    //HttpSession session = request.getSession();  
    session.setAttribute("randomCode", randomCode.toString());  

    // 禁止图像缓存  
    response.setHeader("Pragma", "no-cache");  
    response.setHeader("Cache-Control", "no-cache");  
    response.setDateHeader("Expires", 0);  

    response.setContentType("image/jpeg");  
    // 将图像输出到servlet输出流中  
    ServletOutputStream sos = response.getOutputStream();  
    ImageIO.write(buffImg, "jpeg", sos);  
    sos.close();  
    //sos = null;  
    out.clear();  
    out = pageContext.pushBody();  
%>  
</body>
</html>

在登录界面显示验证码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录界面</title>
<script src="./js/jquery-1.9.0.min.js"></script>  
<script type="text/javascript">  
$(function(){  
    $("#loginform_submit").click(function(){  
        if(checkInput()){  

           $("#form1").submit();  
        }else{  
            return false;  
        }  
    }  
    );  
});  

function checkInput(){  
    var flag = true;  
    //判断用户名  
    if($("input[name=username]").val()==null || $("input[name=username]").val()==""){  
        alert("用户名不能等于空");  
        $("input[name=username]").focus();  
        flag =false;  
        return ;  
    }  
    //判断密码  
    if($("input[name=password]").val()==null || $("input[name=password]").val()==""){  
        alert("密码不能等于空");  
        $("input[name=password]").focus();  
        flag =false;  
        return ;  
    }  
    //判断验证码  
    if($("#validationCode").val()==null || $("#validationCode").val()==""){  
        alert("验证码不能为空");  
        $("#validationCode").focus();  
        flag =false;  
        return ;  
    }  
    return flag;  
}



</script>

</head>
<body>
<div id="loginpanelwrap" align="center">  
        <div>  
            <div>登录</div>  
        </div>  

        <form id="form1" action="do_login.jsp" method="post">  
                   <table>
                   <tr>  
                   <td> <label>用户名:</label>  
                    <input id="username" type="text" name="username" /><br>  

                   </td>  
                   </tr>
                   </table>  
                <label>密码：</label>  
                <input type="password" name="password" id="password"/><br>  

                <label>验证码:</label>  
                <input type="text" name="validationCode" id="validationCode"/>  
                <!--<img id="validationCode_img"  src="validate.jsp"><br>-->
                <img src="validate.jsp"  id="picture" onClick="change()" id="picture"><!--点击验证码可以进行动态刷新  -->
                <!--刷新验证码的src-->
                <script>  
              function change(){  
              var pic=document.getElementById("picture");  
              var i=Math.random();//目的是使页面不一样  
              pic.src="validate.jsp?id="+i;  
                 }  
                 </script>    
                <table>      
                 <tr> 
               <input type="submit" id="loginform_submit" value="登录"/>               
                </tr>  
            </table>

        </form>  

    </div>  
</body>
</html>

用js直接生成验证码并验证

<html>
    <head>
        <title>纯字验证码</title>
        <meta http-equiv='content-type' content='text/html;charset=utf-8'/>
        <script type='text/javascript' src='jquery-1.7.2.js'></script>
        <script type='text/javascript'>
        var code ; //在全局定义验证码  
        
        function createCode(){
             code = "";   
             var codeLength = 4;//验证码的长度  
             var checkCode = document.getElementById("code");   
             var random = 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');//随机数  
             for(var i = 0; i < codeLength; i++) {//循环操作  
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
                code += random[index];//根据索引取得随机数加到code上  
            }  
            checkCode.value = code;//把code值赋给验证码  
        }
        //校验验证码  
        function validate(){  
            var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写        
            if(inputCode.length <= 0) { //若输入的验证码长度为0  
                alert("请输入验证码！"); //则弹出请输入验证码  
            }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
                alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
                createCode();//刷新验证码  
                document.getElementById("input").value = "";//清空文本框  
            }else { //输入正确时  
                alert("合格！^-^");
            }
        }
        </script>
        <style type='text/css'>
        #code{
            font-family:Arial,宋体;
            font-style:italic;
            color:green;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
        }
        </style>
    </head>
    <body οnlοad='createCode()'> 
        <div>验证码：  
            <input type = "text" id = "input"/>  
            <input type="button" id="code" οnclick="createCode()" style="width:60px" title='点击更换验证码' />
            <input type = "button" value = "验证" onclick = "validate()"/>
        </div>  
    </body>
</html>

菜丸

发布了58 篇原创文章 · 获赞 18 · 访问量 3803

私信关注

【验证码】 用java写动态验证码 / 通过jsp生成验证码 / 在登录界面显示验证码 / js直接生成验证码并验证

文章目录

用java写动态验证码

通过jsp生成验证码

在登录界面显示验证码

用js直接生成验证码并验证

猜你喜欢

【验证码】用java写动态验证码 / 通过jsp生成验证码 / 在登录界面显示验证码 / js直接生成验证码并验证