PHP 經典專案實作：部落格管理系統（四）AJAX 即時驗證帳號

PHP 經典專案實作：部落格管理系統（四）AJAX 即時驗證帳號

本篇示範在註冊頁面使用 AJAX 實現使用者名稱即時檢查，無需重新整理頁面即可回饋帳號是否已被註冊。

1. 註冊頁面設計（register.php）

表單包含使用者名稱、真實姓名、密碼、確認密碼、生日、Email 等欄位，每個輸入框搭配 onblur 事件呼叫對應的 JavaScript 驗證函式。

2. 前端驗證邏輯（fun.js）

function chkUserName() {
    var input = document.getElementById('txt_regname');
    var val = input.value;
    var msgErr = document.getElementById('l1');
    var msgOk = document.getElementById('ll1');

    if (val === '') {
        msgErr.innerText = '請輸入使用者名稱';
        msgOk.innerText = '';
        return;
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'chk.php?d=' + encodeURIComponent(val), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            if (xhr.responseText === 'y') {
                msgErr.innerText = '×';
                msgOk.innerText = '';
            } else {
                msgErr.innerText = '';
                msgOk.innerText = '√';
            }
        }
    };
    xhr.send(null);
}
// 其他欄位驗證函式：chkRealName, chkPwd, chkRePwd, chkBirth, chkEmail 類似...

3. 後端檢查腳本（chk.php）

execute_dql($sql);
$row = $res->fetch_assoc();
echo (count($row) !== 0) ? 'y' : 'n';

4. 註冊資料寫入資料庫（registerdeal.php）

execute_dql("SELECT * FROM tb_user WHERE regname = '$UserName'");
if ($res->fetch_assoc()) {
    echo "";
    exit();
}

$_SESSION['username'] = $UserName;
// 取得所有表單欄位...
$ip = getenv('REMOTE_ADDR');
$sql = "INSERT INTO tb_user (regname, regrealname, regpwd, regbirthday, regemail, regcity, regico, regsex, regqq, reghomepage, regsign, regintroduce, ip, fig)
        VALUES ('$regname','$regrealname','$regpwd','$regbirthday','$regemail','$regcity','$regico','$regsex','$regqq','$reghomepage','$regsign','$regintroduce','$ip',0)";
$sqlHelper->execute_dml($sql);
echo "";

透過 AJAX 非同步驗證，使用者體驗大幅提升；後端搭配 SqlHelper 類別執行參數化查詢（原始碼中為字串拼接，實務上建議使用預處理語句防止 SQL 注入）。