JavaWeb实现登录验证码功能

先在Web目录下的lib目录中导入jar包：ValidateCode.jar

然后创建一个Servlet类来创建验证码：ValidateCodeServlet.java

创建验证码将验证码存储到session中，用于在浏览器中输入时进行对比将验证码以图片的形式发给浏览器，这样页面中的图片路径就可以直接加载这个验证码了 package com.robot.servlet; import cn.dsna.util.images.ValidateCode; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; /** * @author 张宝旭 */ @WebServlet(name = "ValidateCodeServlet", value = "/validateCode") public class ValidateCodeServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1 创建验证码 ValidateCode validateCode = new ValidateCode(100, 30, 4, 30); // 2 将验证码存储到Session HttpSession session = request.getSession(); session.setAttribute("validateCode", validateCode.getCode()); // 3 将验证码以图片的形式发给浏览器 validateCode.write(response.getOutputStream()); } }

在登录界面的表单中：login.jsp，创建输入验证码的输入框，其中图片的src路径就可以直接加载ValidateCodeServlet中输出的图片了，此validateCode是在Servlet中定义的路径value = “/validateCode”，不是取session中的值

<span style="color: orange; font-size: 35px; "> 验证码 <input id="login-validate" name="validate" type="text" placeholder="请输入验证码" style="font-size: 25px"/> <img id="img" src="validateCode" οnclick="changeImg()"/> </span>

在验证码图片中实现了点击图片就刷新的方法

<script type="text/javascript"> function changeImg() { document.getElementById("img").src="validateCode?n="+Math.random(); } </script>

此时session中存储了验证码，在页面中也有验证码图片，可以输入验证码了，然后需要的就是将输入的验证码和存储的验证码匹配，检查是否正确

在登录的Servlet中进行判断：LoginServlet.java

获取提交过来的验证码，再获取session中存储的验证码，判断两者是否匹配，如果不匹配，则还跳转到登录界面重新登录，如果匹配成功，就继续执行接下来的代码

String validate1 = request.getParameter("validate"); String validate2 = (String) session.getAttribute("validateCode"); if (!validate1.equalsIgnoreCase(validate2)) { response.sendRedirect("login.jsp"); return; }

最终效果大致如下