在设计登录界面时验证码是必不可少，本实例将简单的生成动态验证码。
根据个人需求将生成验证码代码放到不同的的地方，可以放到前段控制器中通过请求方式生成验证码，也可已将代码放到一个JSP页面通过应用JSP页面生成验证码
工具：J2EE
通过jsp生成验证码
源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@page import="java.awt.image.BufferedImage"%> <%@page import="java.awt.Graphics2D"%> <%@page import="java.awt.Color"%> <%@page import="java.awt.Font"%> <%@page import="javax.imageio.ImageIO"%> <%@page import="java.util.Random"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>验证码</title></head><body><% int width = 60;//定义图片的宽度 int height = 20;//定义图片的高度 // 创建具有可访问图像数据缓冲区的Image BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g = buffImg.createGraphics(); // 创建一个随机数生成器 Random random = new Random(); //将图像填充为 白色 g.setColor(Color.WHITE); g.fillRect(0, 0, width, height); // 创建字体，字体的大小应该根据图片的高度来定 Font font = new Font("Times New Roman", Font.PLAIN, 18); // 设置字体 g.setFont(font); // 画边框 g.setColor(Color.BLACK); g.drawRect(0, 0, width - 1, height - 1); // 随机产生160条干扰线 ,使图像中的验证码不易被其它程序探测到g.setColor(Color.LIGHT_GRAY); for (int i = 0; i < 160; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int x1 = random.nextInt(12); int y1 = random.nextInt(12); g.drawLine(x, y, x + x1, y + y1); } // randomCode 用于保存随机产生的验证码 ，以便用户登陆后进行验证StringBuffer randomCode = new StringBuffer(); int red = 0, green = 0, blue = 0; // 随机产生4位数字的验证码 for (int i = 0; i < 4; i++) { // 得到随机产生的验证码数字 String strRand = String.valueOf(random.nextInt(10)); // 产生随机的颜色分量来构造颜色值 ，这样输出的每位数字的颜色值都将不同 red = random.nextInt(110); green = random.nextInt(50); blue = random.nextInt(50); // 用随机产生的颜色将验证码绘制到图像中 g.setColor(new Color(red, green, blue)); g.drawString(strRand, 13 * i + 6, 16); //将产生的四个随机数组合在一起randomCode.append(strRand); } // 将四位数字的验证码保存到session中 //HttpSession session = request.getSession(); session.setAttribute("randomCode", randomCode.toString()); // 禁止图像缓存 response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); // 将图像输出到servlet输出流中 ServletOutputStream sos = response.getOutputStream(); ImageIO.write(buffImg, "jpeg", sos); sos.close(); //sos = null; out.clear(); out = pageContext.pushBody(); %> </body></html>
运行结果：
在登录界面显示验证码
1.登录界面
源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head lang="en"><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>登录界面</title><script src="./js/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(function(){$("#loginform_submit").click(function(){if(checkInput()){ $("#form1").submit(); }else{ return false; } } ); }); function checkInput(){var flag = true; //判断用户名 if($("input[name=username]").val()==null || $("input[name=username]").val()==""){ alert("用户名不能等于空"); $("input[name=username]").focus(); flag =false; return ; } //判断密码 if($("input[name=password]").val()==null || $("input[name=password]").val()==""){ alert("密码不能等于空"); $("input[name=password]").focus(); flag =false; return ; } //判断验证码 if($("#validationCode").val()==null || $("#validationCode").val()==""){ alert("验证码不能为空"); $("#validationCode").focus(); flag =false; return ; } return flag; }</script></head><body><div id="loginpanelwrap" align="center"> <div> <div>登录</div> </div> <form id="form1" action="do_login.jsp" method="post"> <table><tr> <td> <label>用户名:</label> <input id="username" type="text" name="username" /><br> </td> </tr></table> <label>密码：</label> <input type="password" name="password" id="password"/><br> <label>验证码:</label> <input type="text" name="validationCode" id="validationCode"/> <!--<img id="validationCode_img" src="validate.jsp"><br>--><img src="validate.jsp" id="picture" onClick="change()" id="picture"><!--点击验证码可以进行动态刷新 --><!--刷新验证码的src--><script> function change(){var pic=document.getElementById("picture"); var i=Math.random();//目的是使页面不一样 pic.src="validate.jsp?id="+i; } </script> <table><tr> <input type="submit" id="loginform_submit" value="登录"/></tr> </table></form> </div> </body></html>
运行结果如下：
