web开发验证码生成和验证码校验

首先创建生成验证码的java实体类,这个类是Struts的action类型的。
如下:CheckImgAction.java

package cn.edu.imau.shop.user.action;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;

/** * 验证码Action类 */
public class CheckImgAction extends ActionSupport {

    @Override
    public String execute() throws Exception {
        int width = 120;
        int height = 30;

        // 步骤一 绘制一张内存中图片
        BufferedImage bufferedImage = new BufferedImage(width, height,
                BufferedImage.TYPE_INT_RGB);

        // 步骤二 图片绘制背景颜色 ---通过绘图对象
        Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔
        // 绘制任何图形之前 都必须指定一个颜色
        graphics.setColor(getRandColor(200, 250));
        graphics.fillRect(0, 0, width, height);

        // 步骤三 绘制边框
        graphics.setColor(Color.WHITE);
        graphics.drawRect(0, 0, width - 1, height - 1);

        // 步骤四 四个随机数字
        Graphics2D graphics2d = (Graphics2D) graphics;
        // 设置输出字体
        graphics2d.setFont(new Font("宋体", Font.BOLD, 18));

        String words = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";

        Random random = new Random();// 生成随机数
        // 定义StringBuffer
        StringBuffer sb = new StringBuffer();
        // 定义x坐标
        int x = 10;
        for (int i = 0; i < 4; i++) {
            // 随机颜色
            graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
                    .nextInt(110), 20 + random.nextInt(110)));
            // 旋转 -30 --- 30度
            int jiaodu = random.nextInt(60) - 30;
            // 换算弧度
            double theta = jiaodu * Math.PI / 180;

            // 生成一个随机数字
            int index = random.nextInt(words.length()); // 生成随机数 0 到 length - 1
            // 获得字母数字
            char c = words.charAt(index);
            sb.append(c);
            // 将c 输出到图片
            graphics2d.rotate(theta, x, 20);
            graphics2d.drawString(String.valueOf(c), x, 20);
            graphics2d.rotate(-theta, x, 20);
            x += 30;
        }

        // 将生成的字母存入到session中,以备表单验证时使用
        ServletActionContext.getRequest().getSession()
                .setAttribute("checkcode", sb.toString());

        // 步骤五 绘制干扰线
        graphics.setColor(getRandColor(160, 200));
        int x1;
        int x2;
        int y1;
        int y2;
        for (int i = 0; i < 30; i++) {
            x1 = random.nextInt(width);
            x2 = random.nextInt(12);
            y1 = random.nextInt(height);
            y2 = random.nextInt(12);
            graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
        }

        // 将上面图片输出到浏览器 ImageIO
        graphics.dispose();// 释放资源
        ImageIO.write(bufferedImage, "jpg", ServletActionContext.getResponse()
                .getOutputStream());
        return NONE;
    }

    /** * 取其某一范围的color * * @param fc * int 范围参数1 * @param bc * int 范围参数2 * @return Color */
    private 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);
    }
}

在Struts.xml文件中配置CheckImgAction:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

    <constant name="struts.devMode" value="false" />

    <package name="shop" extends="struts-default" namespace="/">
        <!-- 验证码Action -->
        <action name="checkImg" class="checkImgAction"></action>
    </package>
</struts>

然后在form表单里面添加输入验证码域:

<form id="registerForm" action="${ pageContext.request.contextPath }/user_regist.action"  method="post" >
验证码:
<input type="text" id="checkcode" name="checkcode" class="text captcha" maxlength="4" autocomplete="off"><img id="checkImg" class="captchaImage" src="${pageContext.request.contextPath}/checkImg.action" οnclick="change()" title=>
</form>

创建js脚本,用于替换生成的验证码图片,原理是再向后台发送一次请求,即再生成一个验证码返回到前端页面。
如下:

<script> function change(){ var img1 = document.getElementById("checkImg"); img1.src="${pageContext.request.contextPath}/checkImg.action?"+new Date().getTime(); } </script>

在用户注册action中校验用户输入的验证码是否和系统随机生成的验证码相同,UserAction.java的内容如下:

public class UserAction extends ActionSupport implements ModelDriven<User> {
// 从表单接收验证码:
    private String checkcode;
    public void setCheckcode(String checkcode) {
        this.checkcode = checkcode;
    }
/** * 用户注册的方法: */
    public String regist() {
        // 判断验证码程序:
        // 从session中获得验证码的随机值:
        String checkcode1 = (String) ServletActionContext.getRequest()
                .getSession().getAttribute("checkcode");
        if(!checkcode.equalsIgnoreCase(checkcode1)){
            this.addActionError("验证码输入错误!");
            return "checkcodeFail";
        }
        userService.save(user);
        this.addActionMessage("注册成功!请去邮箱激活!");
        return "msg";
    }
}

到此就完成了,用户注册时的验证码生成和校验。

全部评论

相关推荐

点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务