当前位置：首页 > news >正文

在登录页面上添加验证码

news 来源：原创 2025/5/16 18:58:21

这是一个简单的登录页面，里面必须通过验证码通过之后才能够进入页面

创建一个servlet（验证码的）

package qcby.util;import java.io.IOException;
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 cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;/*** Servlet implementation class Test*/
@WebServlet("/CaptchaServlet")
public class CaptchaServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public CaptchaServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//定义图形验证码的长、宽、验证码字符数、干扰元素个数CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);System.out.println(captcha.getCode());HttpSession session = request.getSession();session.setAttribute("captchaVal", captcha.getCode());//输出到浏览器上captcha.write(response.getOutputStream());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

在之前创建过的js中实现它

$(".btn").on("click",function(){var account = $(".account").val().trim()var password = $(".password").val().trim()var captcha = $(".captcha").val().trim()$.ajax({url:"Studentlogin",type:"get",data:{account,password,captcha},success:function(value){alert(value)if(value=="登录成功"){location.href="student.html"}if(value=="验证码错误"){$("img").click()$(".captcha").val("")}}})
})

在html中也加入相关内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/login.js" defer></script>
</head>
<body><div>账号：<input type='text' class='account'><br>密码：<input type='text' class='password'><br>验证码:<input type='text' class='captcha'><img src="CaptchaServlet" width="100" onclick="this.src=this.src+'?'"><br><input type='button' value='登录' class='btn'> </div>
</body>
</html>

这里使调整图片的大小和验证码的来源，以及点击验证码的图片就可以刷新，避免看不清验证码无法输入的问题