带有随机验证码的登录页面
该功能的完整实现，共有三个页面，分别为：login.jsp和checkCode.jsp以及checkLogin.jsp
以下是login.jsp页面的代码，它主要负责录入登录信息
<%@ page pageEncoding="UTF-8"%> <script language="javascript"> function loginSubmit(){ var usernameValue = document.form.username.value; if(usernameValue==""){ alert("用户名不能为空"); document.form.username.focus(); }else if(usernameValue.indexOf("/")>=0 || usernameValue.indexOf("//")>=0 || usernameValue.indexOf(".")>=0){ alert("用户名不能使用斜线或者圆点"); document.form.username.focus(); }else if(document.form.password.value==""){ alert("密码不能为空"); document.form.password.focus(); }else if((document.form.password.value).length<6){ alert("密码长度不能小于6位"); document.form.password.focus(); }else{ document.form.submit(); } } </script> <body> <form action="checkLogin.jsp" method="POST" name="form"> <table> <tr> <th>用户名：</th> <td><input type="text" name="username"></td> </tr> <tr> <th>密 码：</th> <td><input type="text" name="password"></td> </tr> <tr> <th>验证码：</th> <td><input type="text" name="chkcode" size="2"> <img border="1" src="checkCode.jsp"></td> </tr> <%-- 注意，此时在控制台会滚动出一个信息，如下 --%> <%-- java.lang.IllegalStateException: getOutputStream() has already been called for this response --%> <tr> <td> </td> <td><a href="javascript:loginSubmit();">登录</a> <a href="javascript:document.form.reset();">重置</a></td> </tr> </table> </form> </body>
其次是checkCode.jsp页面的代码，此为实现该功能核心代码，其主要负责生成带有随机验证码的图片
<%@ page contentType="image/jpeg; charset=UTF-8"%> <%@ page import="java.awt.Color"%> <%@ page import="java.util.Random"%> <%@ page import="java.awt.image.BufferedImage"%> <%@ page import="java.awt.Graphics"%> <%@ page import="java.awt.Font"%> <%@ page import="javax.imageio.ImageIO"%> <%-- 这是一个用于生成随机验证码图片的JSP文件 这里contentType="image/jpeg"用来告诉容器：该JSP文件的输出格式为图片格式 登录网站时，通常要求输入随机生成的验证码，这是为了防止有些软件会自动生成破解密码 这些验证码一般都是通过图片显示出来的，并且图片上有很多不规则的线条或者图案来干扰，使得软件很难识别出图案上的验证码 --%> <%! //获得一个在给定范围内的颜色 Color getRandColor(int fc, int bc){ Random random = new Random(); if(fc>255) fc = 255; if(bc>255) bc = 255; int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } %> <% //设置页面不缓存 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); //在内存中创建图像 int width = 60, height = 20; BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = image.getGraphics(); //获取图形上下文 Random random = new Random(); //生成随机类 g.setColor(this.getRandColor(200, 250)); //设定背景色 g.fillRect(0, 0, width, height); g.setFont(new Font("Times New Roman", Font.PLAIN, 18)); //设定字体 //随机产生50条干扰线，使图像中的验证码不易被其它程序探测到 g.setColor(this.getRandColor(160, 200)); for(int i=0; i<50; i++){ int x11 = random.nextInt(width); int y11 = random.nextInt(height); int x22 = random.nextInt(width); int y22 = random.nextInt(height); g.drawLine(x11, y11, x11+x22, y11+y22); } //取随机产生的验证码，这里取四位数字 String sRand = ""; for(int i=0; i<4; i++){ String rand = String.valueOf(random.nextInt(10)); sRand += rand; //将验证码显示到图像中 g.setColor(new Color(20+random.nextInt(110), 20+random.nextInt(100), 20+random.nextInt(100))); //调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成 g.drawString(rand, 13*i+6, 16); } session.setAttribute("rand", sRand); //将验证码存入SESSION g.dispose(); //图像生效 ImageIO.write(image, "JPEG", response.getOutputStream()); //输出图像到页面 %>
最后是checkLogin.jsp页面的代码，它主要负责处理登录页面录入的数据信息
<%@ page pageEncoding="UTF-8"%> <% String message = "程序出现错误"; String chkcode = request.getParameter("chkcode"); String rand = (String)session.getAttribute("rand"); //从session中获得验证码，并与用户输入的验证码进行核对 if(rand.equals(chkcode)){ message = "验证码输入正确"; }else{ message = "验证码输入错误"; } %> <body> <h2>系统随机的验证码为：<%=rand%></h2> <h2>用户输入的验证码为：<%=chkcode%></h2> <h2>验证码的核对结果为：<%=message%></h2> </body>