DNN中使用jQuery Validation時常見問題及解決方法（jQuery Validation with DNN Tips）

本文将淺談一下在開發DNN子產品結合jQuery Validation開發前端驗證代碼時遇到的常見問題以及我的處理方法，希望對DNN有興趣的童鞋有些許的幫助。

1、由于開發DNN子產品是用的還是ASP.NET WebForm 的開發方式但是jQuery官網以及最近的相關部落格中提到的都是與ASP.NET MVC結合使用的例子。jQuery Validation與ASP.NET WebForm混用最大的困難在于jQuery Validation是依賴于DOM Element的name屬性的，但是對于ASP.NET Web Form來說被頁面渲染後的伺服器端空間的id,name都是動态的。即使到了ASP.NET給服務端控件指定為Static模式，最終控件的ID和設計時一樣的，但是name還是跟原來一樣是一串以$分割的長辨別。是以ASP.NET WebForm中不能以官方的如下這種方式使用，

$(".selector").validate({
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        name: "Please specify your name",
        email: {
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of [email protected]"
        }
    }
});
           

那我們該如何解決這個問題呢，細讀jQuery Validation的源代碼後發現：其實我們完全可以怎對每一個元素逐一的進行處理。具體操作請參見如下示例代碼，

$("#"+"<%= txtWidth.ClientID %>").rules("add",{
                required:true,
                digits:true,
                messages:{
                    required:'高度必填',
                    digits:'invalid input'
                }
            });
           

2、本地化預設錯誤資訊動态加載的方法

<script type="text/javascript" src ="http://jzaefferer.github.io/jquery-validation/localization/messages_<%= Local.getDefault().getLanguage() %>.js"/>
           

3、點選Form中的LinkButton不觸發驗證的問題

$("#yourlinkid").click(function(){
     return $('form').valid();
}
           

4、DNN中如果在ascx或者aspx頁面中定制化包含中文的錯誤資訊時界面出現亂碼的問題

打開web.config檔案找到類似如下内容

<globalization culture="en-US" uiCulture="en" requestEncoding="UTF-8" responseEncoding="UTF-8" fileEncoding="UTF-8" />
           

将fileEncoding="UTF-8"替換成GB2312即能解決問題

<globalization culture="en-US" uiCulture="en" requestEncoding="UTF-8" responseEncoding="UTF-8" fileEncoding="GB2312" />
           

參考：

http://jqueryvalidation.org/