引入kaptcha實現驗證碼：

添加到pom.xml中。

web.xml中添加配置：

    <servlet>
        <!-- 生成圖片的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>
    <!-- 映射的url -->
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

在shopoperation.html中添加：

<!-- 驗證碼    kaptcha-->
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="icon icon-form-comment"></i>
                                </div>
                                <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>

創建目錄及文件：

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

var verifyCodeActual = $(‘#j_captcha‘).val();
            if(!verifyCodeActual){
                $.toast(‘請輸入驗證碼！‘);
                reurn;
            }
            formData.append(‘verifyCodeAvtual‘,verifyCodeActual);

引入common.js:

<script type=‘text/javascript‘
        src=‘../resources/js/common/common.js‘ charset=‘utf-8‘></script>

啟動項目訪問：http://localhost:8080/o2o/shopadmin/shopoperate看效果。

另外我們希望每次提交以後都要換驗證碼：

$(‘$captcha-img‘).click();

下面在後臺寫驗證碼驗證：

package com.ouyan.o2o.util;

import javax.servlet.http.HttpServletRequest;

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 verifyCodeAcutal = HttpServletRequestUtil.getString(request, "verifyCodeAcutal");
        if (verifyCodeAcutal == null || !verifyCodeAcutal.equals(verifyCodeExpected)) {
            return false;
        }
        return true;
    }
}

加入幾行代碼：

if(!CodeUtil.checkVerifyCode(request)){
            modelMap.put("success", false);
            modelMap.put("errMsg", "輸入了錯誤的驗證碼");
            return modelMap;
        }

商鋪項目（店鋪註冊功能模塊（五））