程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 詳解ThinkPHP3.2.3驗證碼顯示、刷新、校驗,thinkphp3.2.3驗證碼

詳解ThinkPHP3.2.3驗證碼顯示、刷新、校驗,thinkphp3.2.3驗證碼

編輯:關於PHP編程

詳解ThinkPHP3.2.3驗證碼顯示、刷新、校驗,thinkphp3.2.3驗證碼


ThinkPHP3.2.3驗證碼顯示、刷新、校驗 ,具體如下:

顯示驗證碼

首先在Home/Controller下創建一個公共控制器PublicController

<?php
namespace Home\Controller;

use Think\Controller;
use Think\Verify;

class PublicController extends Controller
{

  /* 生成驗證碼 */
  public function verify()
  {
    $config = [
      'fontSize' => 19, // 驗證碼字體大小
      'length' => 4, // 驗證碼位數
      'imageH' => 34
    ];
    $Verify = new Verify($config);
    $Verify->entry();
  }

  /* 驗證碼校驗 */
  public function check_verify($code, $id = '')
  {
    $verify = new \Think\Verify();
    $res = $verify->check($code, $id);
    $this->ajaxReturn($res, 'json');
  }
}

verify函數用於生成驗證碼,config是用來配置顯示驗證碼的屬性。該屬性有哪些可配置項,可以查看Thinkphp/Library/Think/Verify.class.php文件,此處不再贅述。

check_verify函數用於校驗驗證碼的正確性。模板post用戶填寫的驗證碼到該函數,返回$res==true驗證通過false驗證失敗。
前台模板頁建立index.html

 <div class="">
 <label for="j_verify" class="t">驗證碼:</label> <input id="j_verify"
 name="j_verify" type="text" class="form-control x in">
 <img id="verify_img" alt="點擊更換" title="點擊更換"
 src="{:U('public/verify',array())}" class="m">
 </div>

使用Thinkphp的U方法形成生成驗證碼的圖片。

點擊刷新驗證碼

從上面產生驗證碼的鏈接我們可以看出,域名/public/verify即可產生驗證碼。Thinkphp的驗證碼生成機制是,如若我們需要產生新的驗證碼,在該鏈接後加入一個變量值即可。

我們可以考慮實現public/verify/變量值的形式URL。

$("#verify_img").click(function() {
  var verifyURL = "public/verify";
  var time = new Date().getTime();
  $("#verify_img").attr({
   "src" : verifyURL + "/" + time
  });
});

利用JS獲取當前時間戳加入到URL之後即可。

到此我們即可實現驗證碼的點擊刷新功能。具體表現形式,自己隨意哈。

異步校驗驗證碼

大家一定見過在某些網站,我們輸入驗證碼的時候,輸入的過程中文本框後面一直顯示錯誤,直到我們輸入爭取的時候會先提示驗證碼正確的形式。下面代碼就可以實現:

$("#j_verify").keyup(function() {
  $.post("public/check_verify", {
    code : $("#j_verify").val()
    }, function(data) {
    if (data == true) {
      //驗證碼輸入正確
    } else {
      //驗證碼輸入錯誤
    }
  });
});

利用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官方手冊。如有錯誤之處,歡迎大家指出。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持幫客之家。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved