做一个登录界面+验证码的界面

实现效果：

第一部分、 页面：

<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 赋值给 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;}

如果觉得《登录界面+验证码》对你有帮助，请点赞、收藏，并留下你的观点哦！