做一个登录界面+验证码的界面
实现效果：
第一部分、 页面：
<div class="container" ><h2 style="text-align:center">会员登录 </h2><br><form action="<%=path %>/user/login" method="post" role="form" class="form-horizontal" οnsubmit="return on_submit()" ><div class="form-group"><label class="col-md-4 control-label" style="text-align:right">登录名称</label><div class="col-md-4"><input name="user.userName" id="userName" value="${user.userName}" type="text" class="form-control" placeholder="请输入账号"></div><div class="col-md-4"><label class="error" id="userEr"><c:if test="${er==4 }">用户名不存在</c:if></label></div></div><div class="form-group"><label class="col-md-4 control-label" style="text-align:right">登录密码</label><div class="col-md-4"><input name="user.pswd" id="pswd" value="${user.pswd }" type="password" class="form-control" placeholder="请输入密码"></div><div class="col-md-4"><label class="error" id="pswdEr"><c:if test="${er==5 }">密码错误</c:if></label></div></div><div class="form-group"><label class="col-md-4 control-label" style="text-align:right">验 证 码</label><div class="col-md-2"><input name="vali" id="loginCode" type="text" class="form-control" placeholder="请输入验证码"></div><div class="col-md-2"><img id='imgVcode' src=" <%=path %>/user/checkCode " title="点击图片切换" style="cursor: pointer;" /></div><div class="col-md-4"><label class="error" id="codeEr"><c:if test="${er==3 }">验证码错误</c:if></label></div></div><div class="form-group"><div class="col-md-3 col-md-offset-4"><a href="javascript:void(0);" id="checkCode">看不清楚，换一张</a></div></div><div class="form-group"><div class="col-md-2 col-md-offset-4"><input type="submit" class="btn btn-primary btn-block" value="登录" /> </div><div class="col-md-2"><a class="btn btn-default btn-block" href="">取消</a></div></div></form>
</div>第二部分、jquery：
$(function(){//刷新验证码$("#checkCode").click(function(){$("#loginCode").val('');$("#imgVcode").attr("src", getContextPath()+"/user/checkCode?dt="+new Date().getTime());});$("#userName").keydown(function(){$("#userEr").html("");$("#pswdEr").html("");});$("#pswd").keydown(function(){$("#userEr").html("");$("#pswdEr").html("");});
});
function on_submit(){if($("#userName").val() == "") {$("#userEr").html("请输入用户名");//$("#userName").focus();return false;}else if($("#pswd").val() == "") {$("#pswdEr").html("请输入密码");//$("#pswd").focus();return false;}else if($("#loginCode").val() == "") {$("#codeEr").html("请输入验证码");//$("#loginCode").focus();return false;}
}
【重点在于刷新验证码，重新申请验证码】
第三部分、后台：
省略版：只写一个匹配验证码的，匹配账号面的就不写了
String checkCode =(String) session.get("checkCode");
if (checkCode==null || checkCode.equals("")) {return "login";
}
System.out.println("验证码："+ checkCode +" "+vali);
if(!checkCode.equals(vali)){//没输验证码，验证码不匹配er = 3;return "login";
}private InputStream imageStream;
public String execute(){//从 图片工具类 中生成图片Map<String,BufferedImage> map = ImageUtil.createImage();//获取验证码图片上的字符String key = map.keySet().iterator().next();session.put("checkCode", key);// ← 这个是正确答案//获取 BufferedImage 对象BufferedImage image = map.get(key);//将 BufferedImage 赋值给 imageStreamByteArrayOutputStream bos = new ByteArrayOutputStream();JPEGImageEncoder imageEncoder = JPEGCodec.createJPEGEncoder(bos);//System.out.println("codeAction : " + key);try {imageEncoder.encode(image);byte[] imageBt = bos.toByteArray();imageStream = new ByteArrayInputStream(imageBt);return "success" ;} catch (Exception e) {e.printStackTrace();return "fail";}
}
public InputStream getImageStream() {return imageStream;
}
public void setImageStream(InputStream imageStream) {this.imageStream = imageStream;
}第四部分、生成验证码的图片工具类
private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6","7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H","J","K","L","M","N","P"};
private static final int SIZE = 5; //图像中 数字或字母 的个数
private static final int LINES = 7; //图片中 线 的个数
private static final int WIDTH = 100; //图像的宽度
private static final int HEIGHT = 35; //图像的高度
private static final int FONT_SIZE = 30; //字体大小public static Map<String,BufferedImage> createImage() {StringBuffer sb = new StringBuffer();//字符串常量 ，要配对的 正确答案BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);//加载一张图片Graphics graphic = image.getGraphics(); //绘制图片graphic.setColor(Color.WHITE); //底色graphic.fillRect(0, 0, WIDTH, HEIGHT); //填充Random ran = new Random(); //随机函数//随机生成 SIZE个数字for(int i=1;i<=SIZE;i++){int r = ran.nextInt(chars.length); //在数组长度范围内的随机一个数graphic.setColor(getRandomColor()); //随机 数字字母 颜色 graphic.setFont(new Font(null, Font.BOLD+Font.ITALIC, FONT_SIZE));graphic.drawString(chars[r],(i-1)*WIDTH/SIZE , HEIGHT/3*2);sb.append(chars[r]);// Session}//随机在图片上画线for(int i=1;i<=LINES;i++){graphic.setColor(getRandomColor());//随机 线 的颜色graphic.drawLine(ran.nextInt(WIDTH), ran.nextInt(HEIGHT), ran.nextInt(WIDTH),ran.nextInt(HEIGHT));//随机画线}Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();map.put(sb.toString(), image);return map;
}
//生成随机颜色
public static Color getRandomColor(){Random ran = new Random();Color color = new Color(ran.nextInt(156),ran.nextInt(156),ran.nextInt(156));return color;
}
