mx.validators包的使用实例之二-用Validator检测数字、字符串、Email、电话号码等

2008-03-08 [443] technology flex validator

在上例“用Validator检测必填项”中，我记录了Validator最简单的用法。但mx.validators包中的类并非只有Validator一个，他们可以实现信用卡号码格式检测（mx.validators.CreditCardValidator）、货币格式检测（mx.validators.CurrencyValidator）、E-mail格式检测（mx.validators.EmailValidator）等等功能，所有的检测器列表可以看这里。这些类都是Validator的子类。

先看效果。下面的范例演示了StringValidator、NumberValidator和EmailValidator的用法。由于这三个类都继承自Validator，因此都拥有requiredFieldError属性，用于自定义没有值的时候的错误信息。但是这三个类拥有更多的错误信息。要检测的值越复杂，需要定义的错误信息就越多，例如EmailValidator，本例中共定义了9个错误信息。

如果不定义错误信息，Flex会显示默认的英文错误信息，这显然也不是我们所需要的。如果想偷懒的话，可以定义几个最可能出现的错误，例如本例的NumberValidator，就没有定义所有的错误信息。

顺便还要说一句的是，NumberValidator可以指定要检测的数字是整数还是实数，这需要用domain属性来指定。同时，它还可以指定千分位分隔符。

请使用下面的链接升级 Flash Player 到最新版本：

安装最新的Flash Player插件

这个效果的源码如下：

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200">
 3    <mx:Style>
 4        <![CDATA[
 5        .errorTip
 6        {
 7            fontSize: 12;
 8        }
 9        ]]>
10    </mx:Style>
11    <mx:StringValidator id="nameV" source="{nameTI}" property="text"
12        minLength="2"
13        maxLength="5" 
14        requiredFieldError="必须输入姓名！"
15        tooShortError="姓名过短！"
16        tooLongError="姓名过长！"
17        trigger="{btn}" triggerEvent="click"/>
18    <mx:NumberValidator id="ageV" source="{ageTI}" property="text"
19        domain="int"
20        minValue="6"
21        maxValue="100"
22        lowerThanMinError="年龄过小！"
23        exceedsMaxError="年龄过大！" 
24        integerError="年龄必须是整数！"
25        invalidCharError='输入了非数字字符！'
26        requiredFieldError="必须输入年龄！"
27        trigger="{btn}" triggerEvent="click"/>
28    <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue" 
29        requiredFieldError="必须选择性别！"
30        trigger="{btn}" triggerEvent="click"
31        listener="{maleRB}"/>
32    <mx:EmailValidator id="emailV" source="{emailTI}" property="text"
33        requiredFieldError="必须输入E-mail"
34        invalidCharError="E-mail地址中有错误字符。"
35        invalidDomainError="E-mail地址中的域名不符合规范。"
36        invalidIPDomainError="E-mail地址中的IP格式域名不符合规范。"
37        invalidPeriodsInDomainError="域名中的“.”错误。"
38        missingAtSignError="E-mail地址缺少“@”符号。"
39        missingPeriodInDomainError="域名中缺少“.”"
40        missingUsernameError="E-mail地址缺少用户名。"
41        tooManyAtSignsError="E-mail地址中的“@”符号太多。"
42        trigger="{btn}" triggerEvent="click"/>
43        
44    <mx:FormItem label="姓名：" width="200">
45        <mx:TextInput id="nameTI"/>
46    </mx:FormItem>
47    <mx:FormItem label="年龄：" width="200">
48        <mx:TextInput id="ageTI"/>
49    </mx:FormItem>
50    <mx:FormItem label="性别：" direction="horizontal" width="200">
51        <mx:RadioButtonGroup id="sexRBG"/>
52        <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
53        <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
54    </mx:FormItem>
55    <mx:FormItem label="E-mail：" width="200">
56        <mx:TextInput id="emailTI"/>
57    </mx:FormItem>
58    <mx:Button id="btn" label="提交" />
59</mx:Application>

写本篇标题时，本来想写写PhoneNumberValidator，但是写到这里觉得PhoneNumberValidator还是太简单了，不必再费口舌。只是本篇不免有些挂挂羊头卖狗肉之嫌了。

:em20:

下载源码：

1 文件