1. 程式人生 > 程式設計 >ThinkPHP5.1驗證碼功能實現的示例程式碼

ThinkPHP5.1驗證碼功能實現的示例程式碼

۩ 背景

ThinkPHP5.1 已經出現很久了,最近有所接觸,下面介紹一下常用的第三方驗證碼功能的使用。

ThinkPHP5.1驗證碼功能實現的示例程式碼

環境

  • 框架版本: ThinkPHP5.1.2
  • 執行環境: CentOS7.2、phpStudy2017、Nginx

♜ 功能開發

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

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

composer require topthink/think-captcha

完成上述操作,會在以下目錄中出現 captcha 的擴充套件包

..\vendor\topthink\think-captcha

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>

ThinkPHP5.1驗證碼功能實現的示例程式碼

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

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

function captcha_img($id = "")
{
 $js_src = "this.src='".captcha_src()."'";
 return '<img src="' . captcha_src($id) . '" title="點選更新驗證碼" alt="點選更新驗證碼" οnclick="'.$js_src.'" />';
 //return '![](' . captcha_src($id) . ')';
}

開啟 ..\vendor\topthink\think-captcha\src\helper.php

檔案,替換上面的 captcha_img() 方法程式碼.

此時的驗證碼圖片即可實現點選 實時重新整理 功能.

【注意:2020-02-26】

最近發現,直接在CSDN上覆制上面的程式碼,“onclick” 粘貼後不是正常的程式碼,注意 “o”字母,建議有問題時可手打一下即可!

4). 後臺程式碼驗證

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

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

♞ 提示

官方文件—— 【ThinkPHP5.1 驗證碼指導】

  • 建議閱讀 ..\vendor\topthink\think-captcha\src\helper.php 檔案,及 Captcha.php ,可以進行樣式的自定義.
  • 如果前端 {:captcha_img()} 有傳值 id,那麼後臺 captcha_check() 驗證也需要相應的 id 引數區分。
  • 驗證結果,普遍使用 ajax 請求,以滿足使用者順暢的體驗.

到此這篇關於ThinkPHP5.1驗證碼功能實現的示例程式碼的文章就介紹到這了,更多相關ThinkPHP5.1驗證碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!