ThinkPHP 3.2.3 ----- 驗證碼

標籤：

顯示驗證碼

首先在Home/Controller下建立一個公用控制器PublicController

 1 <?php 2 namespace Home\Controller; 3  4 use Think\Controller; 5 use Think\Verify; 6  7 class PublicController extends Controller 8 { 9 10     /* 產生驗證碼 */11     public function verify()12     {13         $config = [14             ‘fontSize‘ => 19, // 驗證碼字型大小15             ‘length‘ => 4, // 驗證碼位元16             ‘imageH‘ => 3417         ];18         $Verify = new Verify($config);19         $Verify->entry();20     }21 22     /* 驗證碼校正 */23     public function check_verify($code, $id = ‘‘)24     {25         $verify = new \Think\Verify();26         $res = $verify->check($code, $id);27         $this->ajaxReturn($res, ‘json‘);28     }29 }

verify函數用於產生驗證碼，config是用來配置顯示驗證碼的屬性。該屬性有哪些可配置項，可以查看Thinkphp/Library/Think/Verify.class.php檔案，此處不再贅述。

check_verify函數用於校正驗證碼的正確性。模板post使用者填寫的驗證碼到該函數，返回$res==true驗證通過false驗證失敗。
前台模板頁建立index.html

1 <div class="">2 <label for="j_verify" class="t">驗證碼：</label> <input id="j_verify"3 name="j_verify" type="text" class="form-control x164 in">4 <img id="verify_img" alt="點擊更換" title="點擊更換"5 src="{:U(‘public/verify‘,array())}" class="m">6 </div>

使用Thinkphp的U方法形成產生驗證碼的圖片。

到此驗證碼即可正常顯示。點擊重新整理驗證碼

從上面產生驗證碼的連結我們可以看出，網域名稱/public/verify即可產生驗證碼。Thinkphp的驗證碼產生機制是，如若我們需要產生新的驗證碼，在該連結後加入一個變數值即可。

我們可以考慮實現public/verify/變數值的形式URL。

1 $("#verify_img").click(function() {2    var verifyURL = "public/verify";3    var time = new Date().getTime();4    $("#verify_img").attr({5       "src" : verifyURL + "/" + time6    });7 });

利用JS擷取目前時間戳加入到URL之後即可。

到此我們即可實現驗證碼的點擊重新整理功能。具體表現形式，自己隨意哈。

非同步校正驗證碼

大家一定見過在某些網站，我們輸入驗證碼的時候，輸入的過程中文字框後面一直顯示錯誤，直到我們輸入爭取的時候會先提示驗證碼正確的形式。下面代碼就可以實現：

 1 $("#j_verify").keyup(function() { 2     $.post("public/check_verify", { 3         code : $("#j_verify").val() 4         }, function(data) { 5         if (data == true) { 6             //驗證碼輸入正確 7         } else { 8             //驗證碼輸入錯誤 9         }10     });11 });

利用onekeyup。原理就不需要多講了吧！

這樣我們就可以實現在提交使用者名稱密碼之前先進行一次驗證碼校正，之後表單提交之後再進行一次校正，提升使用者體驗啦！

還沒結束：

當我們採取以上形式實現驗證碼兩次校正的時候，肯定會出現第一次非同步校正成功，但是提交表單卻提示驗證碼錯誤的情況！其實原因還是出在Thinkphp的Verify.class.php上：

以下是該類初始的config配置：

protected $config =    array(        ‘seKey‘     =>  ‘ThinkPHP.CN‘,   // 驗證碼加密金鑰        ‘codeSet‘   =>  ‘2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY‘,             // 驗證碼字元集合        ‘expire‘    =>  1800,            // 驗證碼到期時間（s）        ‘useZh‘     =>  false,           // 使用中文驗證碼         ‘zhSet‘     =>  ‘……此處不粘貼了，太多了！‘,              // 中文驗證碼字串        ‘useImgBg‘  =>  false,           // 使用背景圖片         ‘fontSize‘  =>  25,              // 驗證碼字型大小(px)        ‘useCurve‘  =>  false,            // 是否畫混淆曲線        ‘useNoise‘  =>  false,            // 是否添加雜點            ‘imageH‘    =>  0,               // 驗證碼圖片高度        ‘imageW‘    =>  0,               // 驗證碼圖片寬度        ‘length‘    =>  5,               // 驗證碼位元        ‘fontttf‘   =>  ‘‘,              // 驗證碼字型，不設定隨機擷取        ‘bg‘        =>  array(243, 251, 254),  // 背景顏色        ‘reset‘     =>  true,           // 驗證成功後是否重設        );

請大家注意最後一個屬性reset 表示的是驗證成功後是否重設驗證碼。相信大家都明白了吧，我們進行第一次校正通過之後，其實該驗證碼已經失效了，只不過因為我們採取的是非同步校正，頁面並沒有重新整理，導致了第二次申請校正的時候和系統產生的已經是不相同的了。所以如果大家喜歡這種兩次校正的風格，可以考慮將reset配置為false即可。

好了，基於Thinkphp3.2.3的驗證碼問題今天就總結到這了。只是大概說了一下實現方法，具體內容還請大家參考TP官方手冊。如有錯誤之處，歡迎大家指出。

ThinkPHP 3.2.3 ----- 驗證碼