码迷,mamicode.com
首页 > Web开发 > 详细

简易的网页验证码

时间:2017-04-15 01:17:08      阅读:554      评论:0      收藏:0      [点我收藏+]

标签:imp   logs   lan   als   数值   inpu   plain   技术分享   title   

通过使用Java图形界面设计(AWT)来绘制一个简易的验证码,效果如下:

技术分享

 

整体的效果很low,较为现代的网页界面估计不会使用,但作为后台管理界面所需还可以的,在这里还是进行个记录,以备不时之需

第一步:构建验证码

<%@ page language="java" import="java.util.*,java.awt.*" pageEncoding="UTF-8"%>
<%@ page import="javax.imageio.*"%>
<%@ page import="java.awt.image.*" %>
<!-- 验证码 -->
<html>
  <head>
    <title>网上书店</title>
  </head>
  
  <body>
    <%
    response.setHeader("Cache-Control","no-cache");
    //内存中创建图像
    int width=60,height=20;
    BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    //获取画笔
    Graphics g=image.getGraphics();
    //设定背景色
    g.setColor(new Color(200,200,200));
    g.fillRect(0,0,width,height);
    //随机数
    Random rnd=new Random();
    int randNum=rnd.nextInt(8999)+1000;
    String randStr=String.valueOf(randNum);
    //将验证码存入session
    session.setAttribute("randStr",randStr);
    //将验证码显示在图像
    g.setColor(Color.black);
    g.setFont(new Font("",Font.PLAIN,20));
    g.drawString(randStr,10,17);
    //生成100个干扰点(就是图片上的噪点)
    for(int i=0;i<100;i++){
      int x=rnd.nextInt(width);
      int y=rnd.nextInt(height);
      g.drawOval(x,y,1,1);
    }
    //输出图像
    ImageIO.write(image,"JPEG",response.getOutputStream());
    out.clear();
    out=pageContext.pushBody();
     %>
  </body>
</html>

这个JSP页面,名叫code.jsp,其中嵌入的Java代码就是验证码的实现方法。值得注意的有:

int width=60,height=20;
BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);

其中width,height分别设置外部范围的宽和高,也就是灰色区域的宽和高,BufferedImage.TYPE_INT_RGB设置这个区域是由RGB三色构成,值为int型

   //设定背景色
    g.setColor(new Color(200,200,200));

在这里我指定了RGB的颜色,所以呈现一个灰色区域

int randNum=rnd.nextInt(8999)+1000;

使用随机数,这里随机数的范围是1000~9999来输出一个4位的随机数

String randStr=String.valueOf(randNum);
//将验证码存入session
session.setAttribute("randStr",randStr);

这里将具体数值存入session,名字叫randStr,之后会使用

第二步:在需要的页面引入这个JSP

 

<td>
<
input type="text" name="code" size="10"> <img id="imgValidate" src="code.jsp" onclick="refresh()" title="看不清可单击图片刷新">
</
td>

 

增加一个输入项,name="code",Action中要使用,code.jsp就是我们在上面写的验证码页面,为这个img标签来个id="imgValidate",JavaScript中要使用,同时增加一个JavaScript方法用于点击验证码进行刷新

JavaScript代码:

  <script type="text/javascript">
    function refresh(){
     document.getElementById("imgValidate").src="code.jsp?"+new Date();
    }
 </script>

根据当前时间进行刷新,保证两次验证码不一样

第三步:在Action中获得用户输入的验证码与实际显示的验证码进行比较

在Action中增加一个名为code的String变量,并生成其set/get方法

private String code;
public String getCode() {
    return code;
}
public void setCode(String code) {
    this.code = code;
}

在需要验证的方法里进行比较:

String randStr=(String) session.getAttribute("randStr");
    if(code!=null){
     if(code.equals(randStr)){
         System.out.println("验证码正确");
      }else{
         System.out.println("验证码错误");
      }
}

这里使用到了之前传入session中的名为randStr的值,使其与用户输入的code变量进行比较

 

简易的网页验证码

标签:imp   logs   lan   als   数值   inpu   plain   技术分享   title   

原文地址:http://www.cnblogs.com/lz2017/p/6711539.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!