Formatter类
Flex框架中的Formatter类。该类将数据格式化成字符串。所有的格式化类都是mx.formatters.Formatter类的子类，包括：
· CurrencyFormatter （格式化货币）
· DateFormatter （格式化日期）
· NumberFormatter （格式化数字）
· PhoneFormatter （格式化电话号码）
· ZipCodeFormat （格式化邮政编码）
Formatter类的使用
Formatter类也属于非可视化元素，所以在程序中也必须放在Declarations标签块中。
· 所有的格式化类都有一个format()方法，在对象进行格式化时调用该方法；
· 每个格式化子类都有特别的属性来自定义字符串的表现，这个属性就是formatString
使用DateFormatter类格式化日期的显示
效果如下图：
没有进行格式化的输出时间：
进行格式化之后输出的时间：
首先，创建一个DateChooser控件，id为dcCurrentTime，如下:
<mx:DateChooser id="dcCurrentTime"/>
之后，放置一个TextInput控件，如下：
<s:TextInput width="148" id="txtSelectTime" />
再次，在Declarations标签中定义DateFormatter标签，并设置其显示的日期样式，如下：
<fx:Declarations>
<mx:DateFormatter id="dateInputFormator" formatString="YYYY年-MM月-DD日" />
</fx:Declarations>
最后，在TextInput控件的Text属性上绑定DateChooser选择的日期，并调用DateFormatter的format()方法，对其显示进行格式化，如下：
<s:TextInput width="148" id="txtSelectTime"
text="{dateInputFormator.format(dcCurrentTime.selectedDate)}" />
使用Validator及其子类对数据进行验证
Flex框架中有众多的数据验证类，它们都继承自Validator类，常用的有：
· CreditCardValidator，信用卡账号验证；
· Currency，货币验证；
· DateValidator，日期验证；
· EmailValidator，邮件格式验证；
· NumberValidator，数字格式验证；
· ……
Validator类的使用
如同Formatter类一样，Validator也属于非可视化元素，所以在程序中也必须放在Declarations标签块中。
· Validator类的source属性，用于绑定你要验证对象的实体名称；
· property属性用于定义你要验证对象属性的名称，比如：你验证一个文本框的text属性，就用该属性进行设置；
· trigger属性与触发验证对象的实体名称绑定；例如：按钮触发该验证；
· triggerEvent属性为触发验证对象指定一个事件，告诉程序当触发了哪一个事件之后就进行验证操作；比如：按钮的click事件；
使用NumberValidator对数字进行验证
效果如下图：
首先，创建一个FormItem标签，将其属性设置为true，用于显示"小时数"前面的红色星号，表示该项为必填项，之后创建TextInput标签，设置其Id属性，如下：
<mx:FormItem required="true">
<s:Label text="小时数：" id="lblHours"/>
<s:TextInput id="hourInput" width="148" />
</mx:FormItem>
然后，在Declartions标签中创建一个NumberValidator标签，如下：
<mx:NumberValidator id="hourValidator" precision="2" allowNegative="false"required="true"source="{hourInput}" property="text" trigger="{submitButton}" triggerEvent="click"/>
其中，precision属性设置小数点之后保留两位；
allowNegative属性表示不能为负数；
required属性表示该项必须有内容；
source属性表示要验证的对象是文本框hourInput；
Property属性要验证文本框对象的text属性；
Trigger属性表示只有id为submitButton的按钮可以触发验证；
triggerEvent属性表示当id为submitButton的按钮触发click事件时，同时触发文本框的验证。
最后，创建出来Button按钮对象，并设置其Id属性；如下：
<s:Button label="提交" id="submitButton" />
此时就利用NumberValidator类完成了一个对数字数据的验证。
当然，可以使用ActionScript代替MXML命令来触发验证。每个Validator类都有一个validate()方法可以触发验证。Validator类还有一个静态的validateAll()方法，可以用来一次性触发多个Validator实体的验证。
上面的程序可以按照以下步骤修改，使用Validator的validate方法来触发验证：
首先，去除NumberValidator标签中的trigger属性，将triggerEvent的事件设置为空白；如下：
<mx:NumberValidator id="hourValidator" precision="2" allowNegative="false"
required="true" source="{hourInput}" property="text" triggerEvent=""/>
然后，在Script标签中建立一个私有的无参的无返回值类型的方法，在这个方法中创建一个ValidationResultEvent类型的本地变量，将数字验证器对象的validate()方法返回的值赋给这个本地变量；如下：
<fx:Script>
<![CDATA[
imp
private function validateHours():void
{
var event:ValidationResultEvent = hourValidator.validate();
}
]]>
</fx:Script>
最后，在Button按钮中的Click事件中调用这个方法，如下：
<mx:FormItem>
<s:Button label="提交" id="submitButton" click="validateHours()" />
</mx:FormItem>
其显示效果与上面相同。
使用EmailValidator和DateValidator验证邮箱和日期
显示效果如下图：
当点击"提交"按钮时，文本框全部显示为红色边框，并显示相应的信息提示，表示数据不合法；
跟以上不同的是，现在需要对时间、小时数和邮箱同时进行验证，所以首先在Declarations标签中添加EmailValidator和DateValidator标签，以对邮箱和时间进行验证，如下：
<mx:EmailValidator id="emailValidator" source="{txtEmail}"
property="text" triggerEvent="" />
<mx:DateValidator id="dateTiemValidator" source="{txtSelectTime}"
property="text" triggerEvent="" />
同时为各个文本框加上id属性，如下：
<mx:FormItem required="true">
<s:Label text="您选择的时间为：" id="lblSelectTime"/>
<s:TextInput width="148" id="txtSelectTime"
text="{dateInputFormator.format(dcCurrentTime.selectedDate)}" />
</mx:FormItem>
<mx:FormItem required="true">
<s:Label text="小时数：" id="lblHours"/>
<s:TextInput id="txtHourInput" width="148" />
</mx:FormItem>
<mx:FormItem required="true">
<s:Label text="邮箱：" id="lblEmail"/>
<s:TextInput width="148" id="txtEmail" />
</mx:FormItem>
然后，将以上在Script代码块中定义validateHours()的方法去掉，改为以下方法，用于验证对所有的输入框进行数据验证。如下：
<fx:Script>
<![CDATA[
imp
private function validateForm():void
{
Var validationArry:Array = Validator.validateAll([hourValidator,emailValidator,dateTiemValidator]);
}
]]>
</fx:Script>
Validator类还有一个静态的validateAll()方法，可以用来一次性触发多个Validator实体的验证。该方法有一个数组类型的参数，可以将所有的验证器以数组的的形式传入，然后返回一个ValidationResultEvent数组，根据数组的长度来判断Validator是否验证成功。如果返回的数组长度为0，则说明验证成功。
最后，在Button按钮的click属性中调用validateForm()方法。此时就可以完成以上的所有数据验证。
完整的示例代码如下：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<!-- ———————————— 父类属性 ———————————— -->
<s:layout>
<s:BasicLayout/>
</s:layout>
<!-- ———————————— 脚本 ———————————— -->
<fx:Script>
<![CDATA[
imp
private function validateForm():void
{
var validationArry:Array = Validator.validateAll([hourValidator,emailValidator,dateTiemValidator]);
}
]]>
</fx:Script>
<!-- ———————————— 声明 ———————————— -->
<fx:Declarations>
<mx:DateFormatter id="dateInputFormator" formatString="YYYY年-MM月-DD日" />
<mx:NumberValidator id="hourValidator" precision="2" allowNegative="false"
required="true" source="{txtHourInput}" property="text"
triggerEvent="" />
<mx:EmailValidator id="emailValidator" source="{txtEmail}"
property="text" triggerEvent="" />
<mx:DateValidator id="dateTiemValidator" source="{txtSelectTime}"
property="text" triggerEvent="" />
</fx:Declarations>
<!-- ———————————— UI组件 ———————————— -->
<mx:Form x="321" y="83">
<mx:FormHeading label="日期格式化和数据的有效性验证"/>
<s:Label text="当前时间" id="lblCurrentTime"/>
<mx:DateChooser id="dcCurrentTime"/>
<mx:FormItem required="true">
<s:Label text="您选择的时间为：" id="lblSelectTime"/>
<s:TextInput width="148" id="txtSelectTime" text="{dateInputFormator.format(dcCurrentTime.selectedDate)}" />
</mx:FormItem>
<mx:FormItem required="true">
<s:Label text="小时数：" id="lblHours"/>
<s:TextInput id="txtHourInput" width="148" />
</mx:FormItem>
<mx:FormItem required="true">
<s:Label text="邮箱：" id="lblEmail"/>
<s:TextInput width="148" id="txtEmail" />
</mx:FormItem>
<mx:FormItem>
<s:Button label="提交" id="submitButton" click="validateForm()" />
</mx:FormItem>
</mx:Form>
</s:Application>
2795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
