PHP + jQuery + AJAX 實現用戶名即時驗證

前端頁面 register.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用戶名驗證演示</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <style>
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <h2>註冊表單</h2>
    <form id="regForm" action="register.php" method="post">
        <div>
            <label>用戶名: </label>
            <input type="text" id="username" name="username" required>
            <span id="usernameTip"></span>
        </div>
        <div>
            <label>密碼: </label>
            <input type="password" name="password" required>
        </div>
        <button type="submit">提交註冊</button>
    </form>

    <script>
    $(function() { // 等同 $(document).ready()
        $('#username').on('blur', function() {
            var username = $(this).val().trim();
            if (!username) {
                $('#usernameTip').html('<span class="error">用戶名不能為空</span>');
                return;
            }

            $.post('check_user.php', {username: username}, function(result) {
                // 後端約定：返回 JSON {exists: true/false, msg: '...'}
                try {
                    var res = typeof result === 'string' ? JSON.parse(result) : result;
                    if (res.exists) {
                        $('#usernameTip').html('<span class="error">' + (res.msg || '用戶名已存在') + '</span>');
                    } else {
                        $('#usernameTip').html('<span class="success">' + (res.msg || '用戶名可用') + '</span>');
                    }
                } catch (e) {
                    $('#usernameTip').html('<span class="error">服務器響應異常</span>');
                }
            }).fail(function() {
                $('#usernameTip').html('<span class="error">網絡請求失敗</span>');
            });
        });
    });
    </script>
</body>
</html>

後端驗證 check_user.php

<?php
header('Content-Type: application/json; charset=utf-8');

// 模擬數據庫查詢，實際應用連接 PDO/MySQLi
$existingUsers = ['admin', 'test', 'demo', 'root', 'user'];

$username = trim($_POST['username'] ?? '');
$response = ['exists' => false, 'msg' => ''];

if ($username === '') {
    $response['msg'] = '用戶名不能為空';
} elseif (in_array(strtolower($username), $existingUsers)) {
    $response['exists'] = true;
    $response['msg'] = '用戶名已被註冊';
} else {
    $response['msg'] = '用戶名可用';
}

echo json_encode($response, JSON_UNESCAPED_UNICODE);

關鍵知識點總結

進階：防抖版本

let timer = null;
$('#username').on('input', function() {
    clearTimeout(timer);
    const $this = $(this);
    timer = setTimeout(() => {
        const username = $this.val().trim();
        if (!username) return;
        $.post('check_user.php', {username}, function(res) {
            // 同樣處理響應
        });
    }, 300); // 300ms 靜默後發請求
});