ASP.NET MVC 建置班級網站：註冊介面實作與資料註解驗證應用

課程專題採用 ASP.NET MVC 建置班級網站，核心功能之一為使用者註冊。本文記錄註冊介面實作與資料註解驗證的應用經驗。

註冊介面 UI 實作

使用 <fieldset> 結構化表單，語意清晰、無障礙友善：

@model ClassSite.Models.RegisterViewModel

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal" })) {
    <fieldset>
        <legend>使用者註冊</legend>
        
        @Html.AntiForgeryToken()
        
        <div class="form-group">
            @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
            </div>
        </div>
        
        <div class="form-group">
            @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
            </div>
        </div>
        
        <div class="form-group">
            @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
            </div>
        </div>
        
        <div class="form-group">
            @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "text-danger" })
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="註冊" class="btn btn-primary" />
            </div>
        </div>
    </fieldset>
}

ViewModel 與資料註解驗證

using System.ComponentModel.DataAnnotations;

public class RegisterViewModel {
    [Required(ErrorMessage = "請輸入使用者名稱")]
    [StringLength(50, MinimumLength = 3, ErrorMessage = "使用者名稱長度 3-50 字元")]
    [Display(Name = "使用者名稱")]
    public string UserName { get; set; }

    [Required(ErrorMessage = "請輸入電子郵件")]
    [EmailAddress(ErrorMessage = "電子郵件格式不正確")]
    [Display(Name = "電子郵件")]
    public string Email { get; set; }

    [Required(ErrorMessage = "請輸入密碼")]
    [StringLength(100, MinimumLength = 6, ErrorMessage = "密碼至少 6 字元")]
    [DataType(DataType.Password)]
    [Display(Name = "密碼")]
    public string Password { get; set; }

    [Required(ErrorMessage = "請確認密碼")]
    [DataType(DataType.Password)]
    [Display(Name = "確認密碼")]
    [Compare("Password", ErrorMessage = "兩次輸入密碼不一致")]
    public string ConfirmPassword { get; set; }
}

常用驗證屬性

控制器動作實作

[HttpGet]
public ActionResult Register() {
    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task Register(RegisterViewModel model) {
    if (ModelState.IsValid) {
        // 建立使用者 (ASP.NET Identity)
        var user = new ApplicationUser { UserName = model.UserName, Email = model.Email };
        var result = await UserManager.CreateAsync(user, model.Password);
        
        if (result.Succeeded) {
            await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);
            return RedirectToAction("Index", "Home");
        }
        AddErrors(result); // 將 Identity 錯誤加入 ModelState
    }
    // 驗證失敗，回傳 View 顯示錯誤訊息
    return View(model);
}

private void AddErrors(IdentityResult result) {
    foreach (var error in result.Errors) {
        ModelState.AddModelError("", error);
    }
}

客戶端驗證啟用

確保 web.config 啟用 (預設開啟)：

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

引用必要腳本 (BundleConfig 已包含)：

@Scripts.Render("~/bundles/jqueryval")

瀏覽器端自動產生 data-val-* 屬性，jQuery Validation 套件無縫處理。

伺服器端驗證：永遠必要

• 客戶端驗證可被繞過 (停用 JS、攔截請求、API 直接呼叫)。
• 控制器必須檢查 ModelState.IsValid，否則資料完整性無保障。
• 自訂驗證邏輯：實作 IValidatableObject 或自訂 ValidationAttribute。

總結

• 註冊介面採用 fieldset + Bootstrap 橫向表單，語意與視覺並重。
• 資料註解 集中定義驗證規則，單一真實來源，自動支援客戶端/伺服器端雙重驗證。
• ViewModel 隔離視圖需求與領域模型，[Compare] 處理確認密碼，[Remote] 支援非同步唯一性檢查。
• 控制器嚴守 ModelState.IsValid 檢查，配合 ASP.NET Identity 完成使用者建立與登入。