關於tp驗證碼模塊

轉自https://blog.csdn.net/u011415782/article/details/77367280

♜ 功能開發

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>

3). captcha 擴展包代碼優化

• 若是按照上述操做，顯示的驗證碼圖片並不能點擊刷新，可本身根據需求進行刷新功能設計；或者，建議進行下面的代碼優化：

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

• 打開 ..\vendor\topthink\think-captcha\src\helper.php 文件，替換上面的 captcha_img() 方法代碼.
• 此時的驗證碼圖片便可實現點擊 實時刷新 功能.

4). 後臺代碼驗證

• 根據前端請求而來的 verifyCode 數據，調用 helper.php 中的 captcha_check() 方法，進行驗證。

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

   

點擊刷新驗證碼比較簡單的編寫方式，觀察tp5 captcha模塊的源碼，咱們能夠發現，在助手函數中，tp5官方把驗證碼功能封裝到了captcha路徑之中，因此咱們能夠經過onclick 訪問captcha路徑就能夠實現點擊刷新驗證碼了

<img src="{:captcha_src()}" onclick="this.src='/captcha'">