在web项目中登录验证一般采用验证码验证,根据个人需求将生成验证码代码放到不同的的地方,可以放到前段控制器中通过请求方式生成验证码,也可已将代码放到一个JSP页面通过应用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" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</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>
通过应用上面代码就可以生成一个验证码 在后台通过获得session就可以获得产生的验证码 通过比对来验证登录
在登录界面可以这样应用 简单展示一下
<%@ 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 lang="en"> <meta charset="UTF-8"> <title>登录界面</title> <script src="./js/jquery-3.2.1.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="LoginServlet" method="post"> <tr> <td> <label>用户名:</label> <input id="username" type="text" name="username" /><br> </td> </tr> <label>密码:</label> <input type="password" name="password" id=""/><br> <label>验证码:</label> <input type="text" name="validationCode" id="validationCode"/> <img id="validationCode_img" src="validate.jsp"><br> <tr> <span></span> <input type="submit" id="loginform_submit" value="登录" /> </tr> </form> </div> </body> </html>
根据个人喜好可以设置点击更换