注册时需要填写验证码,填写正确才能注册。
1、生成验证码的action,CheckImgAction
package cn.xdy.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;
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);
}
}
2、配置struts.xml
<!-- 验证码 -->
<action name="checkImg" class="checkImgAction">
</action>
3、配置applicationContext.xml
<!-- 验证码的action -->
<bean id="checkImgAction" class="cn.xdy.shop.user.action.CheckImgAction" scope="prototype">
</bean>
4、在regist.jsp页面中修改验证码的src,并增加onclick事件用以点击更换验证码。
<span class="fieldSet">
<input type="text" id="checkcode" name="checkcode" class="text captcha" maxlength="4" autocomplete="off">
<img id="checkImg" class="captchaImage" src="${pageContext.request.contextPath}/checkImg" οnclick="changeImg();" title="点击更换验证码">
</span>
更换验证码的JS
//切换验证码图片
function changeImg(){
var img = document.getElementById("checkImg");
img.src="${pageContext.request.contextPath}/checkImg?"+new Date().getTime();
}
5、若验证码输入错误,则不能注册返回注册页面,并提示错误信息以红色字体显示。
5.1、在UserAction中加入checkcode,提供set方法,用以接收页面传过来的验证码字符串。
private String checkcode;//接收页面传入的验证码
public void setCheckcode(String checkcode) {
this.checkcode = checkcode;
}
在regist方法中,在保存信息之前先判断session中的验证码(即图片上的验证码)与页面传入的验证码是否相同(不区分大小写),如果相同则执行后面的保存信息代码,若不相同,则加入错误信息供页面显示,返回注册逻辑视图。
/**
* 注册
* @return
*/
public String regist(){
//判断验证码与图片上验证码是否一致
if(!checkcode.equalsIgnoreCase((String) ServletActionContext.getRequest().getSession().getAttribute("checkcode"))){
addActionError("验证码错误!");
return "registPage";
}
userService.save(user);
MailUtil.sendMail(user.getEmail(), user.getCode());
this.addActionMessage("注册成功!");
return "msg";
}
5.2、在regist.jsp中在验证码之后加入错误信息,为了使其红色字体显示,设置class,为了通用性,在common.css中加入css代码,代码如下:
<span class="actionerrsor"><s:actionerror/></span>
.actionerrsor{
color:red;
font-weight:bold;
font:"微软雅黑";
}
6、效果图