PHP + Ajax 實現用戶名/郵箱異步驗證是否已註冊

核心流程

1. 前端輸入框失焦 (blur) 觸發 Ajax 請求。
2. 後端 PHP 接收參數，查詢資料庫。
3. 返回純文本或 JSON 提示訊息。
4. 前端將結果顯示在提示區域。

完整代碼

1. 註冊頁面 (reg.php)

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>用戶註冊驗證演示</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
    // 方式一：$.get 簡潔版
    $("#username").blur(function() {
        var val = $(this).val().trim();
        if (!val) return;
        $.get("check_user.php", { user: val }, function(data) {
            $("#msg").html(data).css("color", data.indexOf("可用") >= 0 ? "green" : "red");
        });
    });

    // 方式二：$.ajax 完整版（支援 POST、錯誤處理）
    $("#email").blur(function() {
        var val = $(this).val().trim();
        if (!val) return;
        $.ajax({
            url: "check_email.php",
            type: "POST",
            data: { email: val },
            dataType: "text",
            success: function(data) {
                $("#emailMsg").html(data).css("color", data.indexOf("可用") >= 0 ? "green" : "red");
            },
            error: function() {
                $("#emailMsg").html("網絡錯誤").css("color", "red");
            }
        });
    });
});
</script>
</head>
<body>
<h3>用戶註冊</h3>
<form action="do_reg.php" method="post">
    用戶名：<input type="text" id="username" name="username"> <span id="msg"></span><br><br>
    郵箱：<input type="email" id="email" name="email"> <span id="emailMsg"></span><br><br>
    <input type="submit" value="提交註冊">
</form>
</body>
</html>

2. 用戶名驗證 (check_user.php)

<?php
header("Content-Type: text/html; charset=gb2312");
// 實際項目請使用 PDO 預處理防止注入
$conn = new mysqli("localhost", "root", "password", "dbname");
if ($conn->connect_error) die("連接失敗: " . $conn->connect_error);

$user = isset($_GET['user']) ? $_GET['user'] : '';
if ($user) {
    $stmt = $conn->prepare("SELECT id FROM users WHERE username = ?");
    $stmt->bind_param("s", $user);
    $stmt->execute();
    $stmt->store_result();
    if ($stmt->num_rows > 0) {
        echo "用戶名已被註冊！";
    } else {
        echo "用戶名可以使用";
    }
    $stmt->close();
}
$conn->close();
?>

3. 郵箱驗證 (check_email.php)

<?php
header("Content-Type: text/html; charset=gb2312");
$conn = new mysqli("localhost", "root", "password", "dbname");
$email = isset($_POST['email']) ? $_POST['email'] : '';
if ($email) {
    $stmt = $conn->prepare("SELECT id FROM users WHERE email = ?");
    $stmt->bind_param("s", $email);
    $stmt->execute();
    $stmt->store_result();
    if ($stmt->num_rows > 0) {
        echo "郵箱已被註冊！";
    } else {
        echo "郵箱可以使用";
    }
    $stmt->close();
}
$conn->close();
?>

關鍵點總結

• 使用 blur 事件觸發，避免 keyup 過度請求。
• 後端務必使用預處理語句防止 SQL 注入。
• 返回簡潔文本，前端根據內容顏色區分狀態。
• 生產環境建議返回 JSON 結構：{"valid": true, "message": "可用"}，便於擴展。
• 添加防抖（如 300ms）進一步減輕服務器壓力。