ThinkPHP 驗證碼實現完整指南：表單驗證與 AJAX 驗證雙模式詳解

ThinkPHP 驗證碼實現完整指南：表單驗證與 AJAX 驗證雙模式詳解

在 ThinkPHP 專案中整合驗證碼功能是提升表單安全性的關鍵步驟。本文將詳細介紹兩種主流驗證方式：傳統表單提交驗證與 AJAX 非同步驗證，並提供完整的控制器與視圖代碼範例，助您快速落地。

一、傳統表單提交驗證模式

此模式下，使用者點擊提交按鈕後，表單資料連同驗證碼一同送往伺服器進行驗證。流程直觀，適合簡單業務場景。

1. 控制器實現 (VerifyController.class.php)

namespace Home\Controller;
use Think\Controller;

class VerifyController extends Controller {
    public function index() {
        $this->display();
    }

    public function checkLogin() {
        $verify = new \Think\Verify();
        $code = I('post.verify'); // 獲取表單提交的驗證碼
        if ($verify->check($code)) {
            $this->success('驗證碼正確');
        } else {
            $this->error('驗證碼錯誤');
        }
    }

    public function verify() {
        // 實例化 Verify 物件並配置參數
        $verify = new \Think\Verify();
        $verify->fontSize = 14;      // 字體大小
        $verify->length = 4;         // 驗證碼位數
        $verify->imageH = 34;        // 圖片高度
        $verify->useImgBg = true;    // 啟用背景圖片
        $verify->useNoise = false;   // 關閉干擾雜點
        $verify->entry();            // 輸出驗證碼圖片
    }
}

2. 視圖實現 (Verify/index.html)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <form action="{:U('verify/checkLogin')}" method="post">
        <div class="form-group has-feedback">
            <input type="text" name="verify" id="verify" placeholder="驗證碼" />
            <span></span>
            <img class="verify" src="{:U('verify')}" alt="驗證碼" onClick="this.src=this.src+'?'+Math.random()" />
        </div>
        <div class="col-xs-4">
            <button type="submit">驗證</button>
        </div>
    </form>
</body>
</html>

關鍵點： 圖片的 onClick 事件通過附加隨機參數實現「點擊刷新」功能；表單提交地址指向 checkLogin 方法。

二、AJAX 非同步驗證模式

此模式無需重新整理頁面，透過 JavaScript 將使用者輸入的驗證碼送往後端驗證，體驗更流暢，適合現代 Web 應用。

1. 控制器調整 (VerifyController.class.php)

namespace Home\Controller;
use Think\Controller;

class VerifyController extends Controller {
    public function index() {
        $this->display();
    }

    public function checkLogin() {
        $verify = new \Think\Verify();
        $code = $_POST['code']; // 獲取 AJAX 傳遞的驗證碼
        if ($verify->check($code)) {
            $this->ajaxReturn(1); // 返回 1 表示成功
        } else {
            $this->ajaxReturn(0); // 返回 0 表示失敗
        }
    }

    public function verify() {
        $verify = new \Think\Verify();
        $verify->fontSize = 14;
        $verify->length = 4;
        $verify->imageH = 34;
        $verify->useImgBg = true;
        $verify->useNoise = false;
        $verify->entry();
    }
}

2. 視圖整合 jQuery 與 AJAX 邏輯 (Verify/index.html)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="__JS__/jquery-2.1.0.min.js"></script>
</head>
<body>
    <form action="{:U('verify/checkLogin')}" method="post">
        <div class="form-group has-feedback">
            <input type="text" name="verify" id="verify" placeholder="驗證碼" />
            <span></span>
            <img class="verify" src="{:U('verify')}" alt="驗證碼" onClick="this.src=this.src+'?'+Math.random()" />
        </div>
        <div class="col-xs-4">
            <button type="button" id="ver">驗證</button>
        </div>
    </form>

    <script>
    $(document).ready(function(){
        /* AJAX 驗證碼驗證 */
        $("#ver").click(function(){
            var code = $("#verify").val();           // 獲取輸入的驗證碼
            var url = $('form').attr('action');      // 獲取表單 action
            $.ajax({
                type: "post",
                url: url,
                data: {"code": code},
                error: function(request){
                    alert("AJAX 請求錯誤");
                },
                success: function(data){
                    if (data) {
                        alert("正確");
                    } else {
                        alert("錯誤");
                    }
                }
            });
        });
    });
    </script>
</body>
</html>

三、專案配置補充

為了正確引入 jQuery，需在配置文件 Common/conf/config.php 中設定模板替換字串：

return array(
    /* 地址替換 */
    'TMPL_PARSE_STRING' => array(
        '__JS__' => __ROOT__ . '/Public/JS',
    ),
);

請確保將 jquery-2.1.0.min.js 放置於 /Public/JS/ 目錄下（可從 jq22 下載）。

四、總結與建議

• 表單模式：實作簡單、相容性好，適合傳統多頁面應用。
• AJAX 模式：使用者體驗佳、無需跳轉，適合單頁應用（SPA）或現代前後端分離架構。
• 實際專案中，建議搭配 session 或 token 機制防止驗證碼重複使用，並考慮加入失敗次數限制與鎖定邏輯。