Spring系列 Maven下Kaptcha验证码的使用

1.maven导包：

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
  <groupId>com.github.penggle</groupId>
  <artifactId>kaptcha</artifactId>
  <version>2.3.2</version>
</dependency>

 2.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>ABCDEFHKPRSTWX345679</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.noise.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-->
    <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">
<!-- Kaptcha对应web设置的名字--> 
            </div>
        </div>
    </div>

 3.1点击更换验证码：

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

------------------------------------------------------上面验证码已经可以使用---------------------------------------------------------------------------------- 

 

-----------------------------------------------------下面判断验证码是否填写正确----------------------------------------------------------------------------

4.点击提交表单，判断验证码是否正确：

在提交表单的点击函数中添加：

var formData = new FormData();
//接受验证码
 var verifyCodeActual = $('#j_captcha').val();
//如果验证码为空
 if(!verifyCodeActual) {
  $.toast('请输入验证码！');
  return;
 }
 //不为空    传入后台
 formData.append('verifyCodeActual',verifyCodeActual);