Flex数据显示格式化与数据验证

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[

import?mx.events.ValidationResultEvent;

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[

?????????? import?mx.validators.Validator;

?????????? 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[

import?mx.validators.Validator;

private?function?validateForm():void

{

var?validationArry:Array?=?Validator.validateAll([hourValidator,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>