1. 程式人生 > >TP5 驗證碼功能實現

TP5 驗證碼功能實現

功能開發

1).引入第三方擴充套件包

進行 TP5 的開發,Composer 的使用會成為重要技能  以windows為例子,輸入命令:

composer require topthink/think-captcha 1 完成上述操作,會在以下目錄中出現 captcha 的擴充套件包

..\vendor\topthink\think-captcha 1 2).前端設定

在前端頁面需要顯示驗證碼的位置,補充 {:captcha_img()} 即可,個人程式碼舉例如下:

<p class="pass-form-item">         <label class="pass-label">驗證碼</label>         <input type="text" name="verifyCode" class="pass-text-input " placeholder="請輸入驗證碼">       <div>{:captcha_img()}</div>       </p>

3). captcha 擴充套件包程式碼優化

如果按照上述操作,顯示的驗證碼圖片並不能點選重新整理,可自己根據需求進行重新整理功能設計;或者,建議進行下面的程式碼優化:

function captcha_img($id = "") {     $js_src = "this.src='".captcha_src()."'";     return '<img src="' . captcha_src($id) . '" alt="點選更新驗證碼"      onclick="'.$js_src.'" />';     //return '![](' . captcha_src($id) . ')'; } 開啟 ..\vendor\topthink\think-captcha\src\helper.php 檔案,替換上面的 captcha_img() 方法程式碼. 此時的驗證碼圖片即可實時重新整理.

<input type="text" name="code" id="code" value="" placeholder="驗證碼" />
<img src="{:captcha_src()}"  onclick="this.src='{:captcha_src()}?'+Math.random();" width="120" style=cursor:pointer;" alt="captcha" />

4). 後臺程式碼驗證

根據前端請求而來的 verifyCode 資料,呼叫 helper.php 中的captcha_check() 方法,進行驗證。

 if(request()->isPost()){             $data = input('post.');             if(!captcha_check($data['verifyCode'])) {                 // 校驗失敗                 $this->error('驗證碼不正確');             } } 二種方法:

1-安裝

composer require topthink/think-captcha 1.* -vvv 2-配置檔案

'captcha'  => [        // 驗證碼字元集合3.             'codeSet'  => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',         // 驗證碼字型大小(px)5.        'fontSize' => 28,         // 是否畫混淆曲線7.           'useCurve' => false,          // 驗證碼圖片高度9.           'imageH'   => 50,        // 驗證碼圖片寬度11.            'imageW'   => 200,         // 驗證碼位數13.            'length'   => 4,         // 驗證成功後是否重置        15.           'reset'    => true     ], 3-html  程式碼

 <div class="yzm">                      <img  src="{:captcha_src()}" class="verify" onclick="resVerify()" alt="驗證碼" />                  <a href="javascript:resVerify();"  >看不清,換一張</a>                  </div> 或者

<img src="{:captcha_src()}" class="verify" onclick="javascript:this.src='{:captcha_src()}?rand='+Math.random()" > 4-控制器  登入時候的驗證

$captcha=input("captcha");  //驗證                 if (!captcha_check($captcha)){                     exit(json_encode(array('status'=>0,'msg'=>'驗證碼錯誤')));                 } 或者     //驗證碼驗證碼                 $captcha = new Captcha();                 if (!$captcha->check(input("captcha"))){                     return $this->error("驗證碼錯誤");