達成するためのコード（グーグル）

1. JARパッケージの紹介

<依存> 
    <groupIdを> com.github.penggle </ groupIdを> 
    <たartifactId> kaptcha </たartifactId> 
    <バージョン> 2.3.2 </バージョン> 
 </依存関係>

web.xmlにスタイルを定義2.

<サーブレット> 
        の<servlet-name>のKaptcha </サーブレット名> 
        <servlet- クラス > com.google.code.kaptcha.servlet.KaptchaServlet </ servlet- クラス > 

        <！ -是否有边框- > 
        <INIT- param>の
            の<param-name>のkaptcha.border </ PARAM名> 
            の<param-value>はありません</ PARAM値> 
        </ initの-param>の
        <！ -字体颜色- > 
        の<init-param>の
            の<param -name> kaptcha.textproducer.font.color </ PARAM名> 
            の<param-value>の赤</ PARAM値> 
        </ initの-param>の
        <！ -图片宽度- > 
        の<init-param>の
            <param-name>のkaptcha.image.width </ PARAM名>
            <PARAM値> 135 </ PARAM値> 
        </ INIT-PARAM> 
        <！ -何が文字コードを生成するために使用される- > 
        の<init-param>の
            の<param-name>のkaptcha.textproducer。CHAR .string </ PARAM名> 
            の<param -value> ACDEFHKPRSTWX345679 </ PARAM値> 
        </ initの-param>の
        <！ -画像の高さ- > 
        の<init-param>の
            の<param-name>はkaptcha.image.height </ PARAM名> 
            の<param-値> 50 </ PARAM値> 
        </ initの-param>の
        <！ -フォントサイズ- > 
        の<init-param>の
            の<param-name>のkaptcha.textproducer.font.size </ PARAM名> 
            <値-PARAM> 43 </ PARAM値>である
        </ INIT-param>の
        ！干渉色のライン- < - >
        <init-param>の
            <param-name>のkaptcha.noise.color </ PARAM名> 
            の<param-value>の黒</ PARAM値> 
        </ initの-param>の
        <！ -字符个数- > 
        の<init-param>の
            < PARAM名> kaptcha.textproducer。文字 .LENGTH </ PARAM名> 
            の<param-value>は4 </ PARAM値> 
        </ initの-param>の
        <！ -使用哪些字体- > 
        の<init-param>の
            の<param-name>のkaptcha.textproducer .font.names </ PARAM名> 
            の<param-value>はゴシック</ PARAM値> 
        </ INIT-param>の
    </サーブレット> 
    <サーブレットマッピング>
        <url-pattern> / Kaptcha </のurl-pattern> 
    </のservlet-mapping>

フロント

< 李> 
    < divのクラス= "アイテムコンテンツ" > 
        < divのクラス= "項目メディア" > 
            < I クラス= "アイコンアイコン-フォームメール" > </ I > 
        </ divの> 
        < divのクラス= "アイテム」内側σ > 
            < ラベル用j_captcha "=" クラス"="項目タイトルラベル>验证码</ ラベル>  < 入力
                 ID = "j_captcha"名前=「j_captcha」タイプ=「テキスト」
                クラス"のフォームコントロール" = プレースホルダ= "验证码"  /> 
            < DIV クラス= "項目入力" > 
                < IMG ID = "captcha_img" ALT = "点击更换" タイトル= "点击更换" 
                    のonclick = "changeVerifyCode（本） " SRC =" ../ Kaptcha "  /> 
            </ DIV > 
        </ DIV > 
    </ DIV > 
</ 李> 
関数changeVerifyCode（IMG）{ 
    img.src =" ../Kaptcha？」+数学。床（Math.random（）* 100）; 
}

         VAR verifyCodeActual = $（ "＃のj_captcha" ）.val（）;
          //はどうか、空決定
         IF（！verifyCodeActual）{ 
             （$ .toastを "！に確認コードを入力してください" ）;
              リターン; 
         } 
         formData.append（ "verifyCodeActual" 、verifyCodeActual）。

Utilのクラスのバックエンド

パブリック クラスCodeUtil {
     パブリック 静的 ブールcheckVerifyCode（HttpServletRequestのリクエスト）{ 
        文字列verifyCodeExpected = （文字列）でrequest.getSession（）のgetAttribute（
                com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY）。
        ストリングverifyCodeActual = HttpServletRequestUtil.getString（リクエスト、 "verifyCodeActual" ）。
        もし（verifyCodeActual == nullの ||！verifyCodeActual.equalsIgnoreCase（verifyCodeExpected））{
             リターン はfalse ; 
        }

 // CAPTCHA 
        IF（！CodeUtil.checkVerifyCode（リクエスト））{ 
            modelMap.put（ "成功"、偽の）; 
            modelMap.put（ "たerrMsg Anが"、 "間違ったPINを入力する" ）;
             を返すModelMapを; 
        }

返す 真; 
    }

達成するためのコード（グーグル）

おすすめ