ASP.NET 整合 jQuery Validation Engine 實現 AJAX 遠端驗證

jQuery Validation Engine 是功能強大的表單驗證插件，但官方範例為 PHP 後端，ASP.NET 需調整 JSON 回傳格式才能正常運作。本文記錄修改插件核心 JS 並搭配 .ashx 實現 AJAX 遠端驗證 (如帳號唯一性檢查) 的完整步驟。

前置準備

• 引用 jQuery 核心庫
• 引用插件檔案：
  • jquery.validationEngine.js (核心)
  • jquery.validationEngine-zh_CN.js (中文規則/訊息)
  • validationEngine.jquery.css (樣式)

初始化插件

$(document).ready(function () {
    $("#formID").validationEngine({
        ajaxFormValidation: true,
        validationEventTriggers: "keyup blur",
        promptPosition: "topRight",
        onValidationComplete: function (form, status) {
            if (status) form.submit(); // 全部通過才送出
        }
    });
});

輸入框加入驗證規則

<input type="text" id="txtAccount" name="account" 
       class="validate[required,ajax[ajaxAccountCheck]]" />

語言檔定義 AJAX 規則 (jquery.validationEngine-zh_CN.js)

"ajaxAccountCheck": {
    "url": "Handlers/ValidateHandler.ashx",
    "alertTextLoad": "* 檢查中，請稍候...",
    "alertText": "* 此帳號已被註冊",
    "alertTextOk": "* 帳號可使用",
    "extraData": "type=account" // 額外參數
}

後端處理器 (ValidateHandler.ashx)

public class ValidateHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        string fieldId = context.Request["fieldId"];     // txtAccount
        string fieldValue = context.Request["fieldValue"]; // 使用者輸入值
        string extraData = context.Request["extraData"];   // type=account

        bool isAvailable = CheckAccountAvailable(fieldValue); // 自訂檢查邏輯

        // 關鍵：回傳格式必須符合修改後的 JS 期望結構
        var result = new
        {
            jsonValidateReturn = new object[] { fieldId, extraData, isAvailable }
        };
        context.Response.Write(JsonConvert.SerializeObject(result));
    }

    private bool CheckAccountAvailable(string account)
    {
        // 實際查詢資料庫...
        return !account.Equals("admin", StringComparison.OrdinalIgnoreCase); // 示範
    }

    public bool IsReusable => false;
}

核心修改：jquery.validationEngine.js (AJAX 成功回調處理)

搜尋 $.ajax({ 找到第二處 (約行 800+)，修改 success 回調：

success: function (json) {
    // 原版：var errorFieldId = json[0]; // PHP 陣列格式
    // 修改為：解析自訂 JSON 物件結構
    var errorFieldId = json.jsonValidateReturn[0];
    var errorField = $("input[id='" + errorFieldId + "']");
    
    if (errorField.length === 1) {
        var status = json.jsonValidateReturn[2]; // true/false
        var msg = json.jsonValidateReturn[1];    // extraData 或訊息鍵

        if (!status) {
            options.ajaxValidCache[errorFieldId] = false;
            options.isError = true;
            // 顯示錯誤提示...
        } else {
            options.ajaxValidCache[errorFieldId] = true;
            // 顯示成功提示或關閉...
        }
    }
    errorField.trigger("jqv.field.result", [errorField, options.isError, msg]);
}

驗證流程圖解

1. 使用者輸入帳號 → 觸發 keyup/blur
2. 插件發送 AJAX GET 至 ValidateHandler.ashx?fieldId=txtAccount&fieldValue=xxx&extraData=type=account
3. 後端查詢資料庫 → 回傳 {"jsonValidateReturn":["txtAccount","type=account",true]}
4. 修改後的 JS 解析 jsonValidateReturn → 顯示綠色/紅色提示
5. 表單送出前再次觸發 onValidationComplete 確認全部通過

效果截圖

常見坑點總結

• JSON 格式不符：官方預期陣列 [id, msg, bool]，ASP.NET 易產生物件，需統一格式。
• 單引號導致 JSON.parse 失敗：後端拼接字串務必用雙引號或 JsonConvert.SerializeObject。
• 欄位 ID 匹配：fieldId 必須與前端 input[id] 完全一致。
• 驗證觸發時機：ajaxFormValidation: true 僅在表單送出時觸發遠端驗證；即時驗證需靠 class="validate[ajax[...]]"。