實現效果：(效果圖看最後)
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、輸入錯誤
