做一个登录界面+验证码的界面
实现效果:
第一部分、 页面:
<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";
}
生成验证码图片的action
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 赋值给 imageStream
ByteArrayOutputStream 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;
}