工作中使用的java jsp实现的登录验证码。代码记录如下:
1.登录主页面(login.jsp)
class="java" name="code"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登录</title> <script type="text/javascript"> function refresh() { //IE存在缓存,需要new Date()实现更换路径的作用 document.getElementById("image").src="../login/image.jsp?"+new Date(); } </script> </head> <body> <form action="../login/check.jsp" method="post" id="loginForm" name="loginForm"> 用户名:<input type="text" name="userName"> 密码:<input type="password" name="userPwd"> 验证码:<input type="text" name="code" maxlength="4"> <img id="image" border="0" onclick="refresh()" src="../login/image.jsp" title="点击更换图片"> <input type="submit" value="登录"> </form> </body> </html>
?2. 验证码生成jsp(image.jsp)
<%@page import="javax.imageio.ImageIO"%> <%@page import="java.awt.Font"%> <%@page import="java.awt.Graphics"%> <%@page import="java.awt.image.BufferedImage"%> <%@page import="java.util.Random"%> <%@page import="java.awt.Color"%> <%@ page language="java" contentType="image/JPEG; charset=UTF-8" pageEncoding="UTF-8"%> <%! //获取随机颜色 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; int height = 20; BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //获取图形上下文 Graphics g = image.getGraphics(); //随机类 Random random = new Random(); //设定背景 g.setColor(getRandColor(200, 250)); g.fillRect(0, 0, width, height); //设定字体 g.setFont(new Font("Times New Roman",Font.PLAIN,18)); //随机产生干扰线 g.setColor(getRandColor(160, 200)); for (int i = 0; i < 100; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(12); int yl = random.nextInt(12); g.drawLine(x, y, x + xl, y + yl); } //随机产生4位验证码 String[] codes = {"2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"}; String code = ""; for(int i=0;i<4;i++){ String str = codes[random.nextInt(codes.length)]; code += str; // 将认证码显示到图象中 g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); //调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成 g.drawString(str, 13 * i + 6, 16); } // 将认证码存入SESSION session.setAttribute("code", code); // 图象生效 g.dispose(); // 输出图象到页面 ImageIO.write(image, "JPEG", response.getOutputStream()); //加上下面代码,运行时才不会出现java.lang.IllegalStateException: getOutputStream() has already been called ..........等异常 response.getOutputStream().flush(); response.getOutputStream().close(); response.flushBuffer(); out.clear(); out = pageContext.pushBody(); %>
?3. 验证码检查页面(check.jsp:检查验证码是否输入正确)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>验证</title> <script type="text/javascript"> function same(){ loginForm.action = "login/login_login"; loginForm.submit(); } function different(){ alert("请输入正确的验证码"); location.href = "login.jsp"; } </script> </head> <body> <% String userName = request.getParameter("userName"); String password = request.getParameter("userPwd"); %> <form id="loginForm" name="loginForm" method="post"> <input type="hidden" id="userName" value=<%=userName %> name="user.userName"> <input type="hidden" id="userPwd" value=<%=password %> name="user.userPwd"> </form> <% String rand = session.getAttribute("code").toString(); String input = request.getParameter("code"); if(rand.equals(input)){ out.println("<script language='javascript'>same();</script>"); }else{ out.print("<script language='javascript'>different();</script>"); } %> </body> </html>
?