ASP.NET MVC 客戶端驗證：jQuery Validate 在 Model 驗證中的整合實現

ValidationAttribute 與 HTML data-val-* 屬性對應

Model 屬性標註：

public class Contact
{
    [DisplayName("姓名")]
    [Required(ErrorMessage = "請輸入{0}!")]
    [StringLength(8, ErrorMessage = "作為{0}字符串長度不能超過{1}!")]
    public string Name { get; set; }
    
    [DisplayName("電子郵箱地址")]
    [RegularExpression(@"^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$", ErrorMessage = "請輸入正確的電子郵箱地址！")]
    public string EmailAddress { get; set; }
}

View: @Html.EditorForModel() 產生 HTML：

<input class="text-box single-line"
       data-val="true"
       data-val-length="作為姓名字符串長度不能超過8!"
       data-val-length-max="8"
       data-val-required="請輸入姓名!"
       id="Name" name="Name" type="text" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

<input class="text-box single-line"
       data-val="true"
       data-val-regex="請輸入正確的電子郵箱地址！"
       data-val-regex-pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$"
       id="EmailAddress" name="EmailAddress" type="text" />
<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>

屬性對應規律

data-val="true" 表示啟用驗證。錯誤訊息直接作為規則屬性值。<span data-valmsg-for> 為錯誤訊息顯示容器。

ModelClientValidationRule 產生流程

1. DataAnnotationsModelValidator.GetClientValidationRules() 呼叫適配器方法。
2. 適配器 (如 RequiredAttributeAdapter) 建立 ModelClientValidationRule：

public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
{
    yield return new ModelClientValidationRule
    {
        ValidationType = "required",
        ErrorMessage = ErrorMessage // 來自 Attribute.FormatErrorMessage
    };
}

3. HtmlHelper 擴充方法 (TextBoxFor 等) 呼叫 GetUnobtrusiveValidationAttributes 將規則轉為 HTML 屬性。

前端啟用

需引用三支腳本（順序固定）：

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

頁面載入時 $.validator.unobtrusive.parse(document) 自動解析 data-val-* 綁定規則。

錯誤訊息顯示客製化

<span class="field-validation-valid"> 狀態類別：

• field-validation-valid：無錯誤
• field-validation-error：有錯誤

CSS 可針對 .field-validation-error 設定紅色字體等樣式。

總結

MVC 將 ValidationAttribute 透過 ModelValidator 適配器轉為 ModelClientValidationRule，再由 HtmlHelper 渲染為 data-val-* HTML 屬性。jquery.validate.unobtrusive.js 解析屬性並註冊至 jQuery Validate。前後端共用同一組驗證規則定義，實現 DRY 原則。