ASP.NET 使用者註冊與驗證功能實作：驗證控制項與驗證碼（第 4 節）

前言

本節實作完整的使用者註冊頁面，整合 ASP.NET 內建驗證控制項與第三方驗證碼元件，展示伺服器端驗證的標準流程。

頁面設計

1. 新增 Default.aspx，6×2 表格佈局
2. 欄位：使用者名稱、密碼、確認密碼、QQ、E-Mail、驗證碼、提交按鈕

驗證控制項配置

第三方驗證碼元件整合

1. 下載 WebValidates.dll → 專案 Bin 目錄 → 加入參考 → 工具箱加入 SnCode
2. 頁面拖入 SnCode 控制項

代碼後置實作

public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) SnCode.Create();  // 首次載入產生驗證碼
    }

    private bool CheckCode() {
        if (SnCode.CheckSN(TextBox6.Text.Trim())) return true;
        SnCode.Create();  // 驗證失敗重新產生
        return false;
    }

    protected void Button1_Click(object sender, EventArgs e) {
        if (Page.IsValid) {  // 所有驗證控制項通過
            if (!CheckCode()) {
                Response.Write("");
            } else {
                // 儲存註冊資料到資料庫...
                Response.Write("");
            }
        }
    }

    protected void LinkButton1_Click(object sender, EventArgs e) {
        SnCode.Create();  // 「看不清」點擊換圖
    }
}

執行效果

驗證控制項核心屬性速查

驗證流程圖解

使用者點擊提交
      ↓
Page.IsPostBack = true
      ↓
所有 Validator 執行驗證邏輯
      ↓
[全部通過] → Page.IsValid = true → 執行 Button_Click 邏輯
[任一失敗] → Page.IsValid = false → 顯示錯誤訊息，不執行 Button_Click
      ↓
Button_Click 中再次檢查 Page.IsValid（雙重保險）
      ↓
自訂驗證碼檢查 (SnCode.CheckSN)
      ↓
[通過] → 寫入資料庫 → 成功導向
[失敗] → 重新產生驗證碼 → 顯示錯誤

結語

ASP.NET 驗證控制項提供宣告式驗證機制，大幅減少手寫驗證程式碼。搭配 Page.IsValid 統一檢查，配合第三方驗證碼防機器註冊，構成基礎但實用的註冊防護體系。進階場景建議加入：AJAX 即時檢查帳號唯一性、密碼強度指示器、hCaptcha/reCAPTCHA 替代傳統圖形驗證碼。