注册时需要填写验证码,填写正确才能注册。
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" onclick="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、效果图
时间: 2024-11-06 06:31:53