Codes to achieve (Google)

1. Introducing a jar package

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

2. Define Styles in 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>
        <-! What used to generate character codes -> 
        <the init-param> 
            . <param-name> kaptcha.textproducer char .string </ param-name> 
            <param -value> ACDEFHKPRSTWX345679 </ param-value> 
        </ the init-param> 
        <-! Image height -> 
        <the init-param> 
            <param-name> kaptcha.image.height </ param-name> 
            <param-value > 50 </ param-value> 
        </ the init-param> 
        <-! font size -> 
        <the init-param> 
            <param-name> kaptcha.textproducer.font.size </ param-name> 
            <value-param> 43 is </ param-value> 
        </ the init-param> 
        <-! interference color line ->
        <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>

front end

<li>
    <div class="item-content">
        <div class="item-media">
            <i class="icon icon-form-email"></i>
        </div>
        <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>
    </div>
</li>
function changeVerifyCode(img) {
    img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
}

js

         var verifyCodeActual = $ ( "# j_captcha" ) .val ();
          // determine whether empty 
         IF (! verifyCodeActual) { 
             $ .toast ( "Please enter the verification code!" );
              return ; 
         } 
         formData.append ( "verifyCodeActual" , verifyCodeActual);

 Util class back-end

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;
        }

 // CAPTCHA 
        IF (! CodeUtil.checkVerifyCode (Request)) { 
            modelMap.put ( "Success", to false ); 
            modelMap.put ( "errMsg An", "entered an incorrect PIN" );
             return a ModelMap; 
        }

 

return true;
    }