|
首先在Home/Controller下創(chuàng)建一個(gè)公共控制器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 /* 生成驗(yàn)證碼 */ 11 public function verify() 12 { 13 $config = [ 14 'fontSize' => 19, // 驗(yàn)證碼字體大小 15 'length' => 4, // 驗(yàn)證碼位數(shù) 16 'imageH' => 34 17 ]; 18 $Verify = new Verify($config); 19 $Verify->entry(); 20 } 21 22 /* 驗(yàn)證碼校驗(yàn) */ 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函數(shù)用于生成驗(yàn)證碼，config是用來(lái)配置顯示驗(yàn)證碼的屬性。該屬性有哪些可配置項(xiàng)，可以查看Thinkphp/Library/Think/Verify.class.php文件，此處不再贅述。 check_verify函數(shù)用于校驗(yàn)驗(yàn)證碼的正確性。模板post用戶填寫的驗(yàn)證碼到該函數(shù)，返回$res==true驗(yàn)證通過(guò)false驗(yàn)證失敗。 1 <div class=""> 2 <label for="j_verify" class="t">驗(yàn)證碼：</label> <input id="j_verify" 3 name="j_verify" type="text" class="form-control x164 in"> 4 <img id="verify_img" alt="點(diǎn)擊更換" title="點(diǎn)擊更換" 5 src="{:U('public/verify',array())}" class="m"> 6 </div> 使用Thinkphp的U方法形成生成驗(yàn)證碼的圖片。 到此驗(yàn)證碼即可正常顯示。點(diǎn)擊刷新驗(yàn)證碼從上面產(chǎn)生驗(yàn)證碼的鏈接我們可以看出，域名/public/verify即可產(chǎn)生驗(yàn)證碼。Thinkphp的驗(yàn)證碼生成機(jī)制是，如若我們需要產(chǎn)生新的驗(yàn)證碼，在該鏈接后加入一個(gè)變量值即可。 我們可以考慮實(shí)現(xiàn)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 + "/" + time 6 }); 7 }); 利用JS獲取當(dāng)前時(shí)間戳加入到URL之后即可。 到此我們即可實(shí)現(xiàn)驗(yàn)證碼的點(diǎn)擊刷新功能。具體表現(xiàn)形式，自己隨意哈。 異步校驗(yàn)驗(yàn)證碼大家一定見(jiàn)過(guò)在某些網(wǎng)站，我們輸入驗(yàn)證碼的時(shí)候，輸入的過(guò)程中文本框后面一直顯示錯(cuò)誤，直到我們輸入爭(zhēng)取的時(shí)候會(huì)先提示驗(yàn)證碼正確的形式。下面代碼就可以實(shí)現(xiàn)： 1 $("#j_verify").keyup(function() { 2 $.post("public/check_verify", { 3 code : $("#j_verify").val() 4 }, function(data) { 5 if (data == true) { 6 //驗(yàn)證碼輸入正確 7 } else { 8 //驗(yàn)證碼輸入錯(cuò)誤 9 } 10 }); 11 }); 利用onekeyup。原理就不需要多講了吧！ 這樣我們就可以實(shí)現(xiàn)在提交用戶名密碼之前先進(jìn)行一次驗(yàn)證碼校驗(yàn)，之后表單提交之后再進(jìn)行一次校驗(yàn)，提升用戶體驗(yàn)啦！ 還沒(méi)結(jié)束：當(dāng)我們采取以上形式實(shí)現(xiàn)驗(yàn)證碼兩次校驗(yàn)的時(shí)候，肯定會(huì)出現(xiàn)第一次異步校驗(yàn)成功，但是提交表單卻提示驗(yàn)證碼錯(cuò)誤的情況！其實(shí)原因還是出在Thinkphp的Verify.class.php上： 以下是該類初始的config配置： protected $config = array( 'seKey' => 'ThinkPHP.CN', // 驗(yàn)證碼加密密鑰 'codeSet' => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 驗(yàn)證碼字符集合 'expire' => 1800, // 驗(yàn)證碼過(guò)期時(shí)間（s） 'useZh' => false, // 使用中文驗(yàn)證碼 'zhSet' => '……此處不粘貼了，太多了！', // 中文驗(yàn)證碼字符串 'useImgBg' => false, // 使用背景圖片 'fontSize' => 25, // 驗(yàn)證碼字體大小(px) 'useCurve' => false, // 是否畫混淆曲線 'useNoise' => false, // 是否添加雜點(diǎn) 'imageH' => 0, // 驗(yàn)證碼圖片高度 'imageW' => 0, // 驗(yàn)證碼圖片寬度 'length' => 5, // 驗(yàn)證碼位數(shù) 'fontttf' => '', // 驗(yàn)證碼字體，不設(shè)置隨機(jī)獲取 'bg' => array(243, 251, 254), // 背景顏色 'reset' => true, // 驗(yàn)證成功后是否重置 ); 請(qǐng)大家注意最后一個(gè)屬性reset 表示的是驗(yàn)證成功后是否重置驗(yàn)證碼。相信大家都明白了吧，我們進(jìn)行第一次校驗(yàn)通過(guò)之后，其實(shí)該驗(yàn)證碼已經(jīng)失效了，只不過(guò)因?yàn)槲覀儾扇〉氖钱惒叫ｒ?yàn)，頁(yè)面并沒(méi)有刷新，導(dǎo)致了第二次申請(qǐng)校驗(yàn)的時(shí)候和系統(tǒng)產(chǎn)生的已經(jīng)是不相同的了。所以如果大家喜歡這種兩次校驗(yàn)的風(fēng)格，可以考慮將reset配置為false即可。 |
|
|
