带有随机验证码的登录页面

完整版见https://jadyer.github.io/

该功能的完整实现，共有三个页面，分别为：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>

秒客网

带有随机验证码的登录页面

相关文章