在SUI中使用验证码kaptcha

1.maven引入依赖kaptcha

2.配置web.xml

<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <!-- 是否有边框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
        <!-- 字体颜色 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <!-- 图片宽度 -->
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>135</param-value>
        </init-param>
        <!-- 使用哪些字符生成验证码 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345679</param-value>
        </init-param>
        <!-- 图片高度 -->
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 字体大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>43</param-value>
        </init-param>
        <!-- 干扰线的颜色 -->
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 字符个数 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 字体 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

3.设置SUI Mobile Demo

<!-- 验证码 kaptcha -->
<li>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-title label">验证码</div>
            <input type="text" id="j_captcha" placeholder="验证码">
			<div class="item-input">
			    <img id="captcha_img" alt="点击更换" title="点击更换"
		            onclick="changeVerifyCode(this)" src="../Kaptcha" />
		    </div>
		</div>
	</div>
</li>

4.编写js

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

// 获取表单里输入的验证码
var verifyCodeActual = $('#j_captcha').val();
    if (!verifyCodeActual) {
		$.toast('请输入验证码！');
		return;
	}
formData.append('verifyCodeActual', verifyCodeActual);

//后台处理 点击验证码图片的时候，注册码会改变
$('#captcha_img').click();

//最后要导入js
<script type='text/javascript' src='...'
		charset='utf-8'></script>

5.写一个工具类判断验证码是否符合预期

public class CodeUtil {
	/**
	 * 检查验证码是否和预期相符
	 * 
	 * @param request
	 * @return
	 */
	public static boolean checkVerifyCode(HttpServletRequest request) {
		String verifyCodeExpected = (String) request.getSession()
				.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
		if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
			return false;
		}
		return true;
	}
}

6.在控制器中配置相应代码调用

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