在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：用指定的正则表达式验证输入。

某个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 >

 

在浏览器中运行结果：