Kaptcha验证码的使用实现操作

配置操作

pom.xml中依赖导入

    com.github.penggle
    kaptcha
    2.3.2


	commons-fileupload
	commons-fileupload
	1.3.2

web.xml中 配置serlvet

  	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.font.height
  		50
  	
  	
  		
  	
  		kaptcha.textproducer.font.size
  		43
  	
  		
  	
  		kaptcha.noise.color
  		black
  	
  		
  	
  		kaptcha.textproducer.char.length
  		4
  	
  		
  	
  		kaptcha.textproducer.font.names
  		Arial
  	
  	
  

在Web.xml 响应此servlet

 
  	Kaptcha
  	/Kaptcha
  

在spring的 spring-web.xml中 配置bean

前端部分

html部分

								

									
验证码
										
									

										  
									
								
							

js部分

实现按钮触及函数的操作

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

返回给后台的操作(相关部分的代码，省略了其他不相关代码内容)

var formData = new FormData();
			formData.append('shopImg',shopImg);
			formData.append('shopStr',JSON.stringify(shop));
			
			var verifyCodeActual = $('#j_captcha').val();
			if(!verifyCodeActual){
				$.toast('请输入验证码');
				return;
			}
			formData.append('verifyCodeActual',verifyCodeActual);
			$.ajax({
				url:registerShopUrl,
				type:'POST',
				data:formData,
				contentType:false,
				proceesData:false,
				cache:false,
				success:function(data){
					if(data.success){
						$.toast('提交成功!');
					}else{
						$.toast('提交失败！',data.errMsg);
					}
					$('#captcha_img').click();
				}
			});

后端部分

设计一个Utill类进行判断

public class CodeUtil {
		public static boolean checkVerifyCode(HttpServletRequest req) {
			
			String verifyCodeExpected = (String) req.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
			
			String verifyCodeActual = HttpServletRequestUtil.getString(req, "verifyCodeActual");
			if(verifyCodeActual==null|| !verifyCodeActual.equals(verifyCodeExpected)) 
			{
				return false;
			}
			return true;
		}
		
}

控制器部分

	Map modelMap = new HashMap();
		if(!CodeUtil.checkVerifyCode(req)) {
			modelMap.put("success",false);
			modelMap.put("errMsg","输入了错误的验证码");
			return modelMap;
		}