版权声明：版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nba_linshuhao/article/details/82929707
实现效果：(效果图看最后)
1、输入验证码，点击验证码图片或者"看不清楚"这四个字，验证码会随机切换。
2、输入或者不输入，点击一下验证码框然后鼠标离开，会做出判断，为空提示请输入验证码；已经输入的话判断是否和session中的相同，相同打钩，不相同提示错误。
一、jsp代码
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>--%>
<c:set var="ctx" value="${pageContext.request.contextPath }"/>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link type="text/css" rel="stylesheet" href="${ctx}/css/dreamland.css">
<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/images/lib/js/jquery.min.js"></script>
</head>
<body class="login_bj" style="background-color: grey">
<div class="zhuce_body" >
<div class="zhuce_kong" id="dre_div">
<div class="zc">
<div class="bj_bai" id="regist-left" style="height: 468px">
<h3>欢迎注册</h3>
<form action="${ctx}/doRegister" method="post" id="registerForm">
<input id="code" name="code" type="text" class="kuang_txt yanzm"
placeholder="验证码" onblur="checkCode()">
<div>
<IMG id="captchaImg" style="CURSOR: pointer"
onclick="changeCaptcha()"
title="看不清楚?请点击刷新验证码!" align='absmiddle' src="${ctx}/captchaServlet"
height="18" width="55">
<a href="javascript:;"
onClick="changeCaptcha()" style="color: #666;">看不清楚</a> <span id="code_span" style="color: red"></span>
</div>
<div>
<input name="注册" type="button" class="btn_zhuce" id ="to_register" value="注册">
<br/>
<span style="color: red">${error}</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div style="text-align:center;">
</div>
</body>
<script type="text/javascript">
//更换验证码
function changeCaptcha() {
$("#captchaImg").attr('src', '${ctx}/captchaServlet?t=' + (new Date().getTime()));
}
//验证码校验
var flag_c = false;
function checkCode() {
var code = $("#code").val();
code = code.replace(/^\s+|\s+$/g,"");
if(code == ""){
$("#code_span").text("请输入验证码！").css("color","red");
flag_c = false;
}else{
$.ajax({
type: 'post',
url: '/user/checkCode',
data: {"code": code},
dataType: 'json',
success: function (data) {
var val = data['message'];
if (val == "success") {
$("#code_span").text("√").css("color","green");
$("#reg_span").text("");
flag_c = true;
}else {
$("#code_span").text("验证码错误！").css("color","red");
flag_c = false;
}
}
});
}
return flag_c;
}
</script>
</html>
二、验证码Servelet类
/*
* Copyright (C) 2011-2013 dshine.com
* All rights reserved.
* ShangHai Dshine - http://www.dshine.com
*/
package com.ssm.common;
import javax.imageio.ImageIO;
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 java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
/**
* Created by wly on 2018/4/17.
*/
@WebServlet(name = "BaseServlet",urlPatterns = "/captchaServlet")
public class CodeCaptchaServlet extends HttpServlet {
public static final String VERCODE_KEY = "VERCODE_KEY";
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// request.getSession().removeAttribute(LOGIN_VERCODE_KEY);
request.getSession().removeAttribute(VERCODE_KEY);
// 首先设置页面不缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
//在内存中创建图象
int iWidth = 55, iHeight = 18;
BufferedImage image = new BufferedImage(iWidth, iHeight,
BufferedImage.TYPE_INT_RGB);
//获取图形上下文
Graphics g = image.getGraphics();
//设定背景色
g.setColor(Color.white);
g.fillRect(0, 0, iWidth, iHeight);
//画边框
g.setColor(Color.black);
g.drawRect(0, 0, iWidth - 1, iHeight - 1);
//取随机产生的认证码(4位数字)
//String rand = Utils.getCharacterAndNumber(4);
int intCount=0;
intCount=(new Random()).nextInt(9999);//
if(intCount <1000)intCount+=1000;
String rand=intCount+"";
//将认证码显示到图象中
g.setColor(Color.black);
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
g.drawString(rand, 5, 15);
//随机产生88个干扰点,使图象中的认证码不易被其它程序探测到
Random random = new Random();
for (int iIndex = 0; iIndex < 100; iIndex++) {
int x = random.nextInt(iWidth);
int y = random.nextInt(iHeight);
g.drawLine(x, y, x, y);
}
// 将生成的随机字符串写入session
// request.getSession().setAttribute(LOGIN_VERCODE_KEY, rand);
request.getSession().setAttribute(VERCODE_KEY, rand);
//图象生效
g.dispose();
//输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
super.doPost(req, resp);
}
@Override
public void init()
throws ServletException {
super.init();
}
private static final long serialVersionUID = 5413310437308046316L;
}
三、Controller类
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private HttpServletRequest request; //自动注入request
@RequestMapping("/checkCode")
@ResponseBody
public Map<String, Object> checkCode(Model model, @RequestParam(value = "code", required = false) String code) {
Map map = new HashMap<String, Object>();
String vcode= (String) request.getSession().getAttribute(CodeCaptchaServlet.VERCODE_KEY);
if (code.equals(vcode)) {
//验证码正确
map.put("message", "success");
} else {
//验证码错误
map.put("message", "fail");
}
return map;
}
四、最终实现效果
1、啥都不输入：
2、输入正确
3、输入错误
