利用Kaptcha实现验证码的功能

1.导入kaptcha相关的jar包，maven项目的话在pom.xml文件中添加一下配置：

		
		
			com.github.penggle
			kaptcha
			2.3.2
		

2.在web.xml文件中配置验证码的样式以及URL映射：

		
		Kaptcha
		com.google.code.kaptcha.servlet.KaptchaServlet
		
		
			kaptcha.border
			no
		
		
		
			kaptcha.textproducer.font.color
			red
		
		
		
			kaptcha.image.width
			135
		
		
		
			kaptcha.textproducer.char.string
			ACDEFHKPRSTWX345679
		
		
		
			kaptcha.image.height
			50
		
		
		
			kaptcha.textproducer.font.size
			43
		
		
		
			kaptcha.noise.color
			black
		
		
		
			kaptcha.textproducer.char.length
			4
		
		
		
			kaptcha.textproducer.font.names
			Arial
		
	
	
	
	
		Kaptcha
		/Kaptcha
	

3.在前端页面中显示验证码：

						

							

								

									
								
								

									验证码 
									

										
									
								
							
						

4.完善changeVerifyCode（this）js的函数实现点击更换验证码的功能：

function changeVerifyCode(img) {
	img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
}

完成上述代码后已经可以在前端页面中看到后台所发送过去的验证码，但还无法判断该验证码与用户所输入的是否一致：

5.编写JS获得用户在文本框中所输入的验证码并以JSON形式发送到后台：

var formData = new FormData();
var verifyCodeActual = $('#j_captcha').val();
		if (!verifyCodeActual) {
			$.toast('请输入验证码！');
			return;
		}
		formData.append("verifyCodeActual", verifyCodeActual);
		$.ajax({
			url : registerShpUrl,
			type : 'POST',
			// contentType: "application/x-www-form-urlencoded; charset=utf-8",
			data : formData,
			contentType : false,
			processData : false,
			cache : false,
			success : function(data) {
				if (data.success) {
					$.toast('提交成功！');
					/*
					 * if (isEdit){ $('#captcha_img').click(); } else{
					 * window.location.href="/shop/shoplist"; }
					 */
				} else {
					$.toast('提交失败！');
					$('#captcha_img').click();
				}
			}
		});

６.在后台判断两验证码是否一致：

 public static boolean checkVerifyCode(HttpServletRequest request) {
        // 从HttpSession中获得后台所生成的验证码
        String verifyCodeExpected = (String) request.getSession().getAttribute(
                com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        // 获得用户输入的验证码
        String verifyCodeActual = HttpServletRequestUtil.getString(request,
                "verifyCodeActual");
        if (verifyCodeActual == null
                || !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) {
            return false;
        }
        return true;
    }

/**
     * @Title: getString   
     * @Description: 从request域中获取指定的Key的值并转换成字符串形式
     * @param: @param request
     * @param: @param key
     * @param: @return      
     * @return: String      
     * @throws
     */
    public static String getString(HttpServletRequest request, String key) {
        try {
            String result = request.getParameter(key);
            if (result != null) {
                // 去掉左右两则的空格
                result = result.trim();
            }
            /*判断result是否为空，一般将result写在equals后面，"" 写在前面，
                                     否则result为空的话将会报错*/
            if ("".equals(result))
                result = null;
            return result;
        } catch (Exception e) {
            return null;
        }

    }

以上便是利用kaptcha实现验证码的完整步骤