程式碼基於suimobile+ssm框架編寫，利用Kaptcha外掛生成圖片驗證碼用於登入註冊驗證。 

1.引入pom.xml依賴

<dependency>
  <groupId>com.github.penggle</groupId>
  <artifactId>kaptcha</artifactId>
  <version>2.3.2</version>
</dependency>

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.textproducer.font.size</param-name>
            <param-value>43</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.image.height</param-name>
            <param-value>50</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.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. 前端程式碼

kaptcha.html:

<!-- 驗證碼 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>

kaptcha.js:

$('#submit').click(function(){
　　var formData = new FormData();
　　var verifyCodeActual = $('#j_captcha').val();
        if(!verifyCodeActual){
            $.toast('請輸入驗證碼！');
            return ;
        }
        formData.append('verifyCodeActual',verifyCodeActual);
        //提交
        $.ajax({
            url:registerUrl,
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,
            cache:false,
            success:function(data){
                if(data.success){
                    $.toast('提交成功！');
                } else {
                    $.toast('提交失敗！' + data.Msg);
                }
                //成功與否更新驗證碼
                $('#captcha_img').click();
            }
        });
    });

4.後端程式碼

CodeUtil工具類：

public class CodeUtil {

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

HttpServletRequestUtil工具類：

public static String getString(HttpServletRequest request, String key) {
        try {
            String result = request.getParameter(key);
            if(result != null) {
                result = result.trim();
            }
            if("".equals(result)) {
                result = null;
            }
            return result;
        } catch (Exception e) {
            return null;
        }
    }

 controller層程式碼呼叫：

Map<String, Object> modelMap = new HashMap<String,Object>();
        if(!CodeUtil.checkVerifyCode(request)) {
            modelMap.put("success",false);
            modelMap.put("errMsg", "輸入了錯誤的驗證碼！");
            return modelMap;
        } else{
　　　　　　//進行下一步邏輯
　　　　 }

 5.除錯頁面

6.至此生成圖片驗證碼成功！

 編寫於2019-01-13 14:43:55