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>

?

?

?

http://blog.163.com/qqabc20082006@126/blog/static/229285252010349915628/