随机生成验证码（java）_如果在框架或在对话框中,则弹出提示并跳转到首页-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45659376/article/details/109315047

前端代码
①登录js代码

<script type="text/javascript">
            // 是否点了提交
            var submitFlag = false;
            /*回车的时候提交*/
            function keyLogin(e){
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which;
                // 回车键的键值为13
                if (code==13) {  
                	login();
                 }
            }
            $(document).ready(function() {
                $("#loginForm").validate({
                    rules: {
                        validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"} 
                    },
                    messages: {
                        validateCode: {remote: "<spring:message code='login_save_validateCode_message'/>", required: "<spring:message code='login_save_validateCode'/>"}
                    },
                    showErrors:function(errorMap, errorList) {
                        var errorhtml=""; 
                        $.each( errorList, function(i,v) {
                            if(i==0){
                              errorhtml=v.message;
                              if(submitFlag && "验证码不正确" == v.message) {
                                  $("#validateCode").val("");
                                  // 换一张验证码
								  $('.validateCode').attr('src','${pageContext.request.contextPath}/servlet/validateCodeServlet?'+new Date().getTime());
                                  submitFlag = false;
                              }
                              $("#loginError").html(errorhtml);
                            }
                         });
                    },
                    errorLabelContainer: "#messageBox",
                    errorPlacement: function(error, element) {
                        error.appendTo($("#loginError"));
                    }
                });

            });

            function login(){
                $("#loginForm").submit();
            }

            //如果在框架或在对话框中，则弹出提示并跳转到首页
            if(self.frameElement && self.frameElement.tagName == "IFRAME"){
                alert("<spring:message code='login_timeout'/>");
                top.location = "${ctx}";
            }
        
            window.onload = function(){
                $(window).resize();
            }
        
            $(window).resize(function(){
                var windowH = window.innerHeight
                    ||document.documentElement.clientHeight
                    ||document.body.clientHeight
                var windowW = window.innerWidth
                    ||document.documentElement.clientWidth
                    ||document.body.clientWidth
                $('.loginPic').css({
                    'bottom':windowH/3-120,
                    'left':(windowW-1200)/2,
                })
            })
        </script>

②登录html代码

<body style="overflow-y:auto;">
        <div onkeydown="keyLogin(event);">
            <div class="loginBox div1" id="loginBox">
                <form id="loginForm" action="${ctx}/login" method="post" class="">
                    <div class="loginTit">
                        <span>登录标题</span>
                    </div>
                    <input class="loginInp mb-10 loginInpZh" style="height: 40px;" type="text" id="username" name="username" data-rule-required="true" data-msg-required="<spring:message code='login_save_userName'/>" value="${username}" placeholder="请输入用户名">
                    <input class="loginInp mb-10 loginInpMm" style="height: 40px;" type="password" id="password" name="password" data-rule-required="true" data-msg-required="<spring:message code='login_save_password'/>" placeholder="请输入密码">
                    <div class="clearfix mb-10">
                        <sys:validateCode name="validateCode" inputClass="loginInp loginInpYz" imageCssStyle="height:42px;width:120px" inputCssStyle="margin-bottom:0;"/>
                    </div>
                    <div class="errorlogin" id="messageBox"  >
                        <label id="loginError" class="errorlogin" >${message}</label>
                    </div>
                    <p class="loginBtn" onclick="login()">登录</p>
                </form>
            </div>
        </div>
    </body>

validateCode.tag文件

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ attribute name="name" type="java.lang.String" required="true" description="验证码输入框名称"%>
<%@ attribute name="inputClass" type="java.lang.String" required="false" description="验证框Class"%>
<%@ attribute name="inputCssStyle" type="java.lang.String" required="false" description="验证框样式"%>
<%@ attribute name="imageCssStyle" type="java.lang.String" required="false" description="验证码图片样式"%>
<%@ attribute name="buttonCssStyle" type="java.lang.String" required="false" description="看不清按钮样式"%>

<div class="inpBoxSm verify">
    <input type="text" id="${name}" class="${inputClass}"   name="${name}" maxlength="5" data-rule-required="true"  data-msg-required="请输入验证码"  class="required" style="${inputCssStyle}"/>
</div>
<div class="">
    <img src="${pageContext.request.contextPath}/servlet/validateCodeServlet" onclick="$('.${name}Refresh').click();" class="mid ${name}" style="${imageCssStyle}"/>
</div>
<p class="verifyBtn">
    <a href="javascript:" onclick="$('.${name}').attr('src','${pageContext.request.contextPath}/servlet/validateCodeServlet?'+new Date().getTime());" style="${buttonCssStyle}"><spring:message code="login_change"/></a>
</p>

后端java代码

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.math.NumberUtils;

/**
 * 生成随机验证码
 */
@SuppressWarnings("serial")
public class ValidateCodeServlet extends HttpServlet {
	public static final String VALIDATE_CODE = "validateCode";
	private int w = 80;
	private int h = 36;

	public ValidateCodeServlet() {
		super();
	}

	public void destroy() {
		super.destroy();
	}

	public static boolean validate(HttpServletRequest request, String validateCode) {
		String code = (String) request.getSession().getAttribute(VALIDATE_CODE);
		return validateCode.toUpperCase().equals(code);
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String validateCode = request.getParameter(VALIDATE_CODE); // AJAX验证，成功返回true
		if (StringUtils.isNotBlank(validateCode)) {
			response.getOutputStream().print(
					validate(request, validateCode) ? "true" : "false");
		} else {
			this.doPost(request, response);
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		createImage(request, response);
	}

	private void createImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
		response.setHeader("Pragma", "no-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		response.setContentType("image/jpeg");

		// 得到参数高，宽，都为数字时，则使用设置高宽，否则使用默认值
		String width = request.getParameter("width");
		String height = request.getParameter("height");
		if (StringUtils.isNumeric(width) && StringUtils.isNumeric(height)) {
			w = NumberUtils.toInt(width);
			h = NumberUtils.toInt(height);
		}

		BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
		Graphics g = image.getGraphics();

		// 生成背景
		createBackground(g);

		// 生成字符
		String s = createCharacter(g);
		request.getSession().setAttribute(VALIDATE_CODE, s);

		g.dispose();
		OutputStream out = response.getOutputStream();
		ImageIO.write(image, "JPEG", out);
		out.close();

	}

	private Color getRandColor(int fc, int bc) {
		int f = fc;
		int b = bc;
		Random random = new Random();
		if (f > 255) {
			f = 255;
		}
		if (b > 255) {
			b = 255;
		}
		return new Color(f + random.nextInt(b - f), f + random.nextInt(b - f), f + random.nextInt(b - f));
	}

	private void createBackground(Graphics g) {
		// 填充背景
		g.setColor(getRandColor(220, 250));
		g.fillRect(0, 0, w, h);
		// 加入干扰线条
		for (int i = 0; i < 8; i++) {
			g.setColor(getRandColor(40, 150));
			Random random = new Random();
			int x = random.nextInt(w);
			int y = random.nextInt(h);
			int x1 = random.nextInt(w);
			int y1 = random.nextInt(h);
			g.drawLine(x, y, x1, y1);
		}
	}

	private String createCharacter(Graphics g) {
		char[] codeSeq = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
				'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
				'Z', '2', '3', '4', '5', '6', '7', '8', '9' };
		String[] fontTypes = { "Arial", "Arial Black", "AvantGarde Bk BT",
				"Calibri" };
		Random random = new Random();
		StringBuilder s = new StringBuilder();
		for (int i = 0; i < 4; i++) {
			String r = String.valueOf(codeSeq[random.nextInt(codeSeq.length)]);// random.nextInt(10));
			g.setColor(new Color(50 + random.nextInt(100), 50 + random
					.nextInt(100), 50 + random.nextInt(100)));
			g.setFont(new Font(fontTypes[random.nextInt(fontTypes.length)],
					Font.BOLD, 26));
			g.drawString(r, 15 * i + 5, 19 + random.nextInt(8));
			// g.drawString(r, i*w/4, h-5);
			s.append(r);
		}
		return s.toString();
	}
}