首先在Home/Controller下創建一個公共控制器PublicController
1 <?php 2 namespace Home/Controller; 3 4 use Think/Controller; 5 use Think/Verify; 6 7 html' target='_blank'>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官方手冊。如有錯誤之處,歡迎大家指出。
PHP編程鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答