登录界面+验证码
做一个登录界面+验证码的界面
实现效果：
第一部分、 页面：
会员登录
第二部分、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 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 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 map = new HashMap();
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;
}