在ASP.NET Atlas中建立自訂的Validator

Enlish Version: http://dflying.dflying.net/1/archive/112_build_your_own_validators_in_aspnet_atlas.html

Validator是ASP.NET Atlas中的一類強大的組件，用來檢查InputControl類型的Atlas控制項，例如Web.UI.TextBox，的輸入資料。如果你熟悉ASP.NET的話，你一定知道ASP.NET中作為伺服器控制項啟動並執行Validator。Atlas中的Validator在用戶端提供同樣的功能。Atlas包含如下一些內建的Validator：

1. requiredFieldValidator：檢查是否有資料輸入。
2. typeValidator：檢查輸入的資料是否為特定的類型。
3. rangeValidator：檢查輸入的值是否在一個範圍之內。
4. customValidator：用自訂的驗證函式驗證輸入。
5. regexValidator：用指定的Regex驗證輸入。

某個Atlas用戶端控制項的Validator可被定義成一個集合，當控制項的propertyChanged事件被引發時，Atlas將調用Validator集合中的所有Validator去驗證輸入的資料。在驗證的過程中一旦失敗，這個Validator的validationMessage將被設定。Validator可以以組的形式驗證一組控制項的輸入，並統一顯示錯誤資訊。

您還可以指定一個validationErrorLabel控制項關聯於某個將被驗證的輸入控制項，它可以顯示驗證過程中的錯誤並可以自訂錯誤提示。

OK，以上內容大部分來自Atlas的文檔，這裡不再贅述。讓我們通過一個IPAddressValidator的執行個體來學習如何編寫自訂的Validator。顧名思義，IPAddressValidator將用於驗證某個輸入是否為一個合法的IPv4地址。

通常的，編寫自訂Validator有如下兩個步驟：

1. 從Sys.UI.Validator基類中繼承。
2. 實現validate()方法來驗證輸入，並返回一個布爾值代表是否驗證成功。

下面是IPAddressValidator的實現，並將其儲存為IPAddressValidator.js。

Sys.UI.IPAddressValidator = function() {
    Sys.UI.IPAddressValidator.initializeBase(this);

    this.validate = function(value) {
        if (!value) {
            return false;
        }
        if (String.isInstanceOfType(value)) {
            if (value.length == 0) {
                return false;
            }
        }
        var ipPattern = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
        var ipArray = value.match(ipPattern);

        if (ipArray == null)
            return false;

        for (i = 0; i < 4; i++) {
            var thisSegment = ipArray[i];
            if (thisSegment > 255) {
                return false;
            }
        }
        return true;
    }
}
Sys.UI.IPAddressValidator.registerSealedClass('Sys.UI.IPAddressValidator', Sys.UI.Validator);
Sys.TypeDescriptor.addType('script', 'ipAddressValidator', Sys.UI.IPAddressValidator);

 

讓我們在頁面中測試上面的IPAddressValidator控制項。這裡將添加一個text box用於待驗證IP地址的輸入，一個label用於顯示錯誤資訊。

這裡是ASPX中的HTML聲明，不要忘記在ScriptManager中添加對上面IPAddressValidator.js檔案的引用。

<atlas:ScriptManager runat="server" ID="ScriptManager1">
    <Scripts>
        <atlas:ScriptReference Path="IPAddressValidator.js" />
    </Scripts>
</atlas:ScriptManager> 
  
<div class="description">
    Please input an IP Address: 
    <input type="text" id="ipBox" class="input" />
    <span id="ipValidator" style="color: red">This IP Address is invalid!</span>
</div>

 

 

下面是Atlas指令碼定義：

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <components>
        <textBox id="ipBox">
            <validators>
                <ipAddressValidator errorMessage="This IP Address is invalid!" />
            </validators>
        </textBox>
        <validationErrorLabel id="ipValidator" associatedControl="ipBox" />
    </components>
</page>

 

在瀏覽器中運行結果：