kaptcha实现验证码

pom.xml引入包

 

 

 

web.xml

 

 

<!-- 如果是用mvn命令生成的xml，需要修改servlet版本为3.1 -->
    <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  这里配置后，在html页面的../Kaptcha 才能访问到--> 

<servlet-mapping> <servlet-name>Kaptcha</servlet-name> <url-pattern>/Kaptcha</url-pattern> </servlet-mapping>

 页面：

页面访问问题

如这个页面的访问路径是：http://localhost:8089/shopadmin/shopedit  而验证码的访问路径是：http://localhost:8089/Kaptcha

则在这个页面访问验证码就为：../Kaptcha。  

如果为./Kaptcha ,则访问路径为：http://localhost:8089/shopadmin/Kaptcha。不能访问到验证码

src="../Kaptcha" 的Kaptcha与 web的<servlet-name>Kaptcha</servlet-name>对应

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

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

js：将验证码传到后端，并更新

    $('#submit').click(function() {
        var shop = {};

        shop.shopName = $('#shop-name').val();
        shop.shopAddr = $('#shop-addr').val();
        shop.phone = $('#shop-phone').val();
        shop.shopDesc = $('#shop-desc').val();

        shop.shopCategory = {
            //获取选中selected，的那个类别的id
            shopCategoryId : $('#shop-category').find('option').not(function() {
                return !this.selected;
            }).data('id')
        };
        /*data('id')与 data-id="'对应
         下面语句表示$('#area')的option的被选中的 data-id的值*/
        shop.area = {
            areaId : $('#area').find('option').not(function() {
                return !this.selected;
            }).data('id')
        };

        var shopImg = $("#shop-img")[0].files[0];
        /*CRJ Ajax 上传文件，则需要使用 FormData 对象来作为数据*/
        var formData = new FormData();
        formData.append('shopImg', shopImg);
        formData.append('shopStr', JSON.stringify(shop));//JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
        var verifyCodeActual = $('#j_captcha').val();  //验证码
        if (!verifyCodeActual) {
            $.toast('请输入验证码！');
            return;
        }
        formData.append("verifyCodeActual", verifyCodeActual);
        $.ajax({
            url : editShopUrl,
            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 class CodeUtil {
    /*
    判断验证码是否正确
    * */
    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.equalsIgnoreCase(verifyCodeExpected)) {
            return false;
        }
        return true;
    }
}