您的位置：首页 > Web前端 > JavaScript

Servlet+JSP 实现验证码

2017-04-20 14:06 381 查看

  页面html代码

<body>

     验证码：<input type="text" name="checkcode"  id="checkcode"/>

    <img  src="<%=request.getContextPath() %>/imageServlet" alt="验证码" id="image" />

    <a href="javascript:reload();"><label>换一张</label></a><br>

    <input  type="button" value="提交"  onclick="javascript:verificationcode()">

    <span id="span"></span>

</body>

这里图片的src是一个servlet，在下面会贴出来，为了便于使用异步后台验证，这里的提交按钮是button。调用verificationcode()方法。

  页面JavaScript代码

<script type="text/javascript">

     function reload(){

        document.getElementById("image").src="<%=request.getContextPath() %>/imageServlet?date="+new Date().getTime();

        $("#checkcode").val("");   // 将验证码清空

    }



     function verificationcode(){

         var text=$.trim($("#checkcode").val());

         $.post("${pageContext.request.contextPath}/verificationServlet",{op:text},function(data){

             data=parseInt($.trim(data));

             if(data>0){

                 $("#span").text("验证成功!").css("color","green");

             }else{

                 $("#span").text("验证失败!").css("color","red");

                 reload();  //验证失败后需要更换验证码

             }

         });

         $("#checkcode").val(""); // 将验证码清空

     }

</script>

这里使用ImageServlet生成图片验证码，使用post后台验证，在点击标签换验证码图片的时候，一定要在调用生成图片前加一个时间戳，也就是上面的document.getElementById("image").src="<%=request.getContextPath() %>/imageServlet?date="+new Date().getTime();这句代码的最后加？后面的代码一定不能少，因为浏览器是由缓存的，如果不加时间戳，在点击标签换图片时，验证码图片不会正常更换。

在ImageServlet生成验证码图片

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");



        BufferedImage bfi = new BufferedImage(80,25,BufferedImage.TYPE_INT_RGB);

        Graphics g = bfi.getGraphics();

        g.fillRect(0, 0, 80, 25);



        //验证码字符范围

        char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".toCharArray();

        Random r = new Random();

        int index;

        StringBuffer sb = new StringBuffer(); //保存字符串

        for(int i=0; i<4; i++){

            index = r.nextInt(ch.length);

            g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));

            Font font = new Font("宋体", 30, 20);

            g.setFont(font);

            g.drawString(ch[index]+"", (i*20)+2, 23);

            sb.append(ch[index]);

        }



        // 添加噪点

        int area = (int) (0.02 * 80 * 25);

        for(int i=0; i<area; ++i){

            int x = (int)(Math.random() * 80);

            int y = (int)(Math.random() * 25);

            bfi.setRGB(x, y, (int)(Math.random() * 255));

        }



      //设置验证码中的干扰线

        for (int i = 0; i < 6; i++) {

              //随机获取干扰线的起点和终点

              int xstart = (int)(Math.random() * 80);

              int ystart = (int)(Math.random() * 25);

              int xend = (int)(Math.random() * 80);

              int yend = (int)(Math.random() * 25);

              g.setColor(interLine(1, 255));

              g.drawLine(xstart, ystart, xend, yend);

            }

        HttpSession session = request.getSession();  //保存到session

        session.setAttribute("verificationCode", sb.toString());

        ImageIO.write(bfi, "JPG", response.getOutputStream());  //写到输出流

    }

为了便于比对结果，一定要将字符串保存到session。因为session是当前会话有效的，也就是说在你关闭浏览器之前，session里的值都是可以取到的。这里为了增加验证的难度，是不区分大小写的。噪点和干扰线的数量也是可调的。
随机产生干扰线颜色的方法：

private static Color interLine(int Low, int High){

        if(Low > 255)

            Low = 255;

        if(High > 255)

            High = 255;

        if(Low < 0)

            Low = 0;

        if(High < 0)

            High = 0;

        int interval = High - Low;

        int r = Low + (int)(Math.random() * interval);

        int g = Low + (int)(Math.random() * interval);

        int b = Low + (int)(Math.random() * interval);

        return new Color(r, g, b);

      }

最后是使用VerificationServlet对验证码图片上的字符与输入的字符串进行比对！把存入session中的verificationCode取出来与checkcode进行比对，返回结果。

在VerificationServlet进行验证

HttpSession session =request.getSession();

String verificationCode = (String)session.getAttribute("verificationCode");

String checkcode = request.getParameter("op");

PrintWriter out = response.getWriter();

if(checkcode.equals(verificationCode)){

    out.println(1);

}else{

    out.println(0);

}

out.flush();

out.close();

实现效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航