PHP + AJAX 即時驗證註冊表單：使用者名稱唯一性檢查完整實作

架構圖解

瀏覽器 (index.html) --[onKeyUp]--> AJAX (ajax.js) --[GET q=username]--> PHP (conn.php) --[SQL]--> MySQL
                    <--[JSON/HTML 片段]-- <--[回應]-- <--[查詢結果]--

四大核心檔案

1. ajax.js - 通用 AJAX 引擎 (無需修改)

var xmlHttp;
function showHint(str) {
    if (!str.length) { document.getElementById('txtHint').innerHTML = ''; return; }
    xmlHttp = GetXmlHttpObject();
    xmlHttp.onreadystatechange = stateChanged;
    var url = 'conn.php?q=' + encodeURIComponent(str) + '&sid=' + Math.random();
    xmlHttp.open('GET', url, true);
    xmlHttp.send(null);
}
function stateChanged() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
        document.getElementById('txtHint').innerHTML = xmlHttp.responseText;
}
function GetXmlHttpObject() {
    try { return new XMLHttpRequest(); }
    catch (e) {
        try { return new ActiveXObject('Msxml2.XMLHTTP'); }
        catch (e) { return new ActiveXObject('Microsoft.XMLHTTP'); }
    }
}

2. conn.php - 後端驗證邏輯

<?php
$q = urldecode($_GET['q']);
if (strlen($q) > 0) {
    $conn = mysqli_connect('localhost', 'root', '1010', 'xin') or die('DB連線失敗');
    mysqli_set_charset($conn, 'utf8');
    $sql = "SELECT username FROM message WHERE username = ?";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, 's', $q);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_store_result($stmt);
    if (mysqli_stmt_num_rows($stmt) > 0)
        echo '<font color=red>已被註冊！</font>';
    else
        echo '<font color=blue>恭喜！可註冊！</font>';
    mysqli_stmt_close($stmt);
    mysqli_close($conn);
}

安全強化： 使用 mysqli_prepare 防 SQL 注入，原範例直接拼接字串有風險。

3. index.html - 前端表單

<input type="text" id="txt1" onKeyUp="showHint(this.value)" placeholder="用戶名">
<span id="txtHint"></span>

4. 庫.txt - 資料庫結構

CREATE DATABASE `xin` DEFAULT CHARSET utf8;
USE `xin`;
CREATE TABLE `message` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `username` VARCHAR(20) DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

部署步驟

1. 建立資料庫 xin 並匯入 message 表。
2. 修改 conn.php 資料庫連線參數。
3. 將四個檔案放入 Web 根目錄 (如 htdocs/regcheck/)。
4. 瀏覽 https://localhost/regcheck/index.html 測試。

擴充建議

• 加入密碼強度即時檢查、Email 格式驗證、手機號碼歸屬地查詢等。
• 回傳格式改為 JSON ({valid: true, msg: ''})，前端統一渲染 UI，解耦後端輸出。
• 加入節流 (debounce) 避免頻繁請求：setTimeout/clearTimeout 控制發送間隔 (建議 300ms)。