在登录页面上添加验证码

暮夏2025-05-09 11:32

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

创建一个servlet（验证码的）

java 复制代码

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 stub
		doGet(request, response);
	}

}

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

javascript 复制代码

$(".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中也加入相关内容

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>

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