一個 Validator 驗證多個控制項：動態切換驗證目標技巧

痛點：大量輸入欄位導致驗證控制項爆炸

ASP.NET 頁面若有上百個 TextBox，每個都掛一個 RequiredFieldValidator，客戶端會渲染上百個 <span>，頁面體積暴增、初始化緩慢。解法：單一 CustomValidator 動態切換驗證目標。

核心原理

CustomValidator 客戶端物件擁有 controltovalidate、clientvalidationfunction、validateemptytext 等屬性，可在 onfocus 事件中動態修改，指向當前獲得焦點的控制項。

完整實作步驟

1. ASPX：僅放一個 CustomValidator + ValidationSummary

<body>
  <form id="form1" runat="server">
    <div>
      <asp:CustomValidator ID="CustomValidator1" runat="server" />
      <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
    </div>
  </form>
</body>

2. Code-behind：動態產生 TextBox 並掛載 onfocus

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        for (int i = 0; i < 10; i++) {
            TextBox tb = new TextBox();
            tb.ID = "tb" + i;
            // 關鍵：onfocus 觸發 JS 函式，傳入 this 與 Validator ClientID
            tb.Attributes.Add("onfocus",
                "HookUpControl(this, '" + CustomValidator1.ClientID + "')");
            Page.Form.Controls.Add(tb);
        }
    }
}

3. JavaScript：HookUpControl 動態綁定驗證

function HookUpControl(curObj, validatorClientID) {
    var val = document.getElementById(validatorClientID);
    val.controltovalidate = curObj.id;           // 切換驗證目標
    val.clientvalidationfunction = "validatetextbox"; // 指定驗證函式
    val.validateemptytext = "true";              // 空白也驗證
    ValidatorHookupControl(curObj, val);         // 官方 API 完成掛鉤
}

4. 驗證函式：簡單非空檢查

function validatetextbox(source, args) {
    args.IsValid = (args.Value.trim() !== "");
}

運作流程

1. 使用者點擊某 TextBox → 觸發 onfocus。
2. HookUpControl 將唯一的 CustomValidator 指向該 TextBox。
3. 使用者離開或送出表單 → 瀏覽器自動呼叫 validatetextbox 驗證當前目標。
4. ValidationSummary 收集所有驗證結果顯示。

優缺點權衡

進階擴充：送出時全欄位驗證

function validateAll(validatorID) {
    var val = document.getElementById(validatorID);
    var inputs = document.querySelectorAll('input[type=text]');
    var allValid = true;
    inputs.forEach(function(tb) {
        val.controltovalidate = tb.id;
        ValidatorValidate(val); // 手動觸發驗證
        if (!val.isvalid) allValid = false;
    });
    return allValid;
}
// 送出按鈕 OnClientClick="return validateAll('CustomValidator1');"

此技巧在「大量動態欄位、即時單欄驗證、送出前全檢」場景極具價值，是 ASP.NET WebForms 時代的經典優化模式。