ASP.NET MVC 客戶端驗證基礎：jQuery Validate Unobtrusive JavaScript 程式設計模式

Unobtrusive JavaScript 與漸進式增強

核心原則：HTML 負責結構、CSS 負責樣式、JavaScript 負責行為，三者分離。避免內聯事件屬性 (onblur="validate()")。

傳統內聯寫法（不推薦）

<input id="foo" type="text" onblur="validate()" />

Unobtrusive 寫法

<input id="foo" type="text" />
<script>
window.onload = function() {
    document.getElementById("foo").onblur = validate;
};
</script>

jQuery Validate 內聯規則寫法 (Class-based)

直接在 class 屬性宣告規則：

<input class="required" id="name" name="name" type="text" />
<input class="required date" id="birthDate" name="birthDate" type="text" />
<input class="required url" id="blogAddress" name="blogAddress" type="text" />
<input class="required email" id="emailAddress" name="emailAddress" type="text" />

啟用：$("form").validate();

內建規則類別：required、email、url、date、number、digits、minlength、maxlength、range 等。

完整範例：ASP.NET MVC View 中使用

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-1.6.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script>
    $(document).ready(function () {
        $("form").validate();
        $("td:first-child").css("text-align", "right");
    });
    </script>
    <style>
    label.error { color: red; }
    </style>
</head>
<body>
    <form action="/">
        <table>
            <tr><td>姓名：</td><td><input class="required" id="name" name="name" type="text" /></td></tr>
            <tr><td>出生日期：</td><td><input class="required date" id="birthDate" name="birthDate" type="text" /></td></tr>
            <tr><td>Blog地址：</td><td><input class="required url" id="blogAddress" name="blogAddress" type="text" /></td></tr>
            <tr><td>Email地址：</td><td><input class="required email" id="emailAddress" name="emailAddress" type="text" /></td></tr>
            <tr><td colspan="2"><input type="submit" value="保存" /></td></tr>
        </table>
    </form>
</body>
</html>

錯誤訊息客製化

$.validator.messages 覆寫預設訊息：

$.extend($.validator.messages, {
    required: "此欄位為必填",
    email: "請輸入有效的電子郵件",
    url: "請輸入有效的網址",
    date: "請輸入有效的日期"
});

進階：自訂規則與訊息 (非 Unobtrusive)

$.validator.addMethod("customRule", function(value, element, params) {
    return /^[A-Z]{3}\d{4}$/.test(value); // 如 AAA1234
}, "格式必須為三大寫字母加四位數字");

// 使用
<input class="required customRule" name="code" />

總結

jQuery Validate 提供兩種規則宣告方式：Class-based 內聯（簡單、快速原型）與 data-val-* Unobtrusive（MVC 整合、規則集中管理、支援動態參數）。理解 Class-based 基礎有助於掌握 Unobtrusive 底層運作原理。