PHP AJAX 使用者註冊與使用者名驗證完整實戰教學

前言

本文提供一個完整的「前端 AJAX + 後端 PHP + MySQL」使用者註冊系統範例，包含使用者名即時檢查、驗證碼生成與驗證、照片上傳、表單驗證、資料庫操作、SQL 注入防護等核心功能，適合學習 AJAX 互動流程與 PHP 後端處理的開發者參考。

系統架構與檔案結構

• index.html：註冊表單頁面，含 jQuery、自訂 JS 驗證邏輯、AJAX 呼叫
• checkusername.php：檢查使用者名是否已存在
• verifycode.php：生成圖形驗證碼（Session 儲存）
• checkcode.php：驗證使用者輸入的驗證碼
• register.php：處理註冊提交、照片上傳、資料寫入、結果顯示
• SQL：建立 test 資料庫與 user 表

核心功能模組詳解

1. 前端表單與 AJAX 邏輯 (index.html)

• 表單欄位：使用者名、密碼、確認密碼、姓名、性別、年齡、手機、地址、Email、照片、生日、驗證碼
• onblur 觸發 checkusername()、checkcode() 即時驗證
• XMLHttpRequest 相容 IE 與現代瀏覽器
• 表單送出前 checkform() 做必填驗證
• 錯誤訊息動態插入至對應 <td id="pmt_*">

2. 使用者名檢查 (checkusername.php)

<?php
$username = $_GET['username'];
mysql_connect('127.0.0.1', 'root', '') or die('connect failed');
mysql_select_db('test');

// 防 SQL 注入：轉義特殊字元並加引號
$username = htmlentities($username, ENT_QUOTES);
$sql = "SELECT COUNT(*) FROM user WHERE username = '{$username}'";

$result = mysql_query($sql);
if ($row = mysql_fetch_array($result, MYSQL_NUM)) {
    $cnt = $row[0];
    echo $cnt == 0 ? '使用者名未被使用' : '使用者名已被使用，請改換使用者名';
}
?>

注意：範例使用已棄用的 mysql_* 函式，實務請改用 PDO 或 MySQLi 預處理語句。

3. 驗證碼生成 (verifycode.php)

<?php
session_start();

$rnd = array_merge(range(0,9), range('a','z'));
shuffle($rnd);
$code = substr(implode('', $rnd), 0, 4);

$_SESSION['verifycode'] = $code;

header("Content-Type: image/png");
$im = @imagecreate(50, 25) or die("GD error");
$bg = imagecolorallocate($im, 255, 255, 255);
$text = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 5, 5, 5, $code, $text);
imagepng($im);
imagedestroy($im);
?>

4. 驗證碼驗證 (checkcode.php)

<?php
session_start();
$code = $_GET['code'];
echo strtoupper($code) == $_SESSION['verifycode'] ? '驗證碼正確' : '驗證碼錯誤';
?>

5. 註冊處理與照片上傳 (register.php)

<?php
session_start();

// 1. 照片上傳處理
$filename = '';
if (isset($_FILES['photo'])) {
    $uploaddir = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'upload';
    $origin = $_FILES['photo']['name'];
    $ext = strtolower(substr($origin, strrpos($origin, '.') + 1));
    $filename = time() . '.' . $ext;

    $validExt = ['jpg','jpeg','gif','png'];
    if (!in_array($ext, $validExt)) { die('錯誤的檔案類型'); }
    if ($_FILES['photo']['size'] > 100*1024) { die('檔案太大，超過 100KB'); }

    $uploadfile = $uploaddir . DIRECTORY_SEPARATOR . $filename;
    if (!move_uploaded_file($_FILES['photo']['tmp_name'], $uploadfile)) {
        die('照片上傳失敗');
    }
}

// 2. 驗證碼複核
if ($_POST['verifycode'] != $_SESSION['verifycode']) {
    die('驗證碼輸入不正確');
}

// 3. 資料庫寫入
mysql_connect('127.0.0.1', 'root', '');
mysql_select_db('test');
mysql_query('SET NAMES utf8');

$username = addslashes($_POST['username']);
$pwd = md5($_POST['pwd']);
$name = addslashes($_POST['name']);
$sex = addslashes($_POST['sex']);
$age = intval($_POST['age']);
$mobile = addslashes($_POST['mobile']);
$address = addslashes($_POST['address']);
$email = addslashes($_POST['email']);
$photo = $filename;
$birthday = addslashes($_POST['birthday']);

$sql = "INSERT INTO user (username,pwd,name,sex,age,mobile,address,email,photo,birthday)
        VALUES ('$username','$pwd','$name','$sex',$age,'$mobile','$address','$email','$photo','$birthday')";

if (!mysql_query($sql)) {
    die('資料庫寫入失敗');
}

// 4. 顯示所有使用者
$sql = 'SELECT * FROM user';
$res = mysql_query($sql);
echo "<table><tr><td>使用者名</td><td>姓名</td>...</tr>";
while ($row = mysql_fetch_assoc($res)) {
    echo "<tr><td>{$row['username']}</td>...";
}
echo "</table>";
?>

資料庫結構

DROP DATABASE IF EXISTS test;
CREATE DATABASE test CHARACTER SET utf8 COLLATE utf8_general_ci;
USE test;

CREATE TABLE user (
    username CHAR(10) PRIMARY KEY,
    pwd CHAR(32) NOT NULL,
    name CHAR(10) NOT NULL,
    sex CHAR(1) NOT NULL,
    mobile CHAR(11),
    age SMALLINT,
    address VARCHAR(50),
    email VARCHAR(30),
    photo VARCHAR(20),
    birthday DATE
);

安全性與現代化改進重點

現代化架構建議

• 前端：Vue/React + Axios/Fetch，元件化表單驗證（VeeValidate/Yup）。
• 後端：Laravel/Symfony/ThinkPHP 等框架，內建驗證、授權、資源控制器、API Resource。
• 資料庫：Migration 管理結構，Eloquent/Doctrine ORM 操作。
• 驗證碼：整合 reCAPTCHA v3（無感驗證）或 hCaptcha。
• 檔案上傳：Flysystem 介面對接本地/S3/OSS，自動處理權限、CDN、圖片處理。
• API 規範：JSON:API 或自定義統一回應格式 {code, message, data}。

總結

本範例完整展示了傳統「jQuery AJAX + 原生 PHP + MySQL」註冊系統的全流程，涵蓋即時驗證、驗證碼、檔案上傳、資料持久化等關鍵環節。雖然程式碼使用了已棄用的函式且安全性有待加強，但其架構思路（前後端分離互動、分層處理）仍具參考價值。實務開發請務必採用現代框架、預處理語句、強雜湊、完善驗證與異常處理，構建安全、可維護、可擴充的系統。

1. 上一篇文章： PHP Session 處理類 my_session 簡易封裝教學
2. 下一篇文章： PHP 隨機數生成函式完整教學：mt_rand、rand、mt_srand 差異、種子控制、效能比較

PHP 相關知識

PHP 5.3.5 Windows 安裝 memcache 擴展完整避坑指南

核心原則：版本必須「四個一致」 維度要求查看方法 PHP

Ajax + PHP 圖片上傳與縮略圖生成：iframe 無刷新體驗完整實現

技術方案概覽 前端：<form target

PHP 扁平陣列轉多維樹狀結構：點號鍵值解析法

應用場景 常見於無限分類、選單結構、麵包屑導航等需求。資料來

PHP Session 機制深度解析：從創建到鍵值存儲

PHP Session 機制深度解析：從創建到鍵值存儲 Se