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

最新推荐文章于 2023-04-06 09:39:15 发布

Super_man_2018

最新推荐文章于 2023-04-06 09:39:15 发布

阅读量1.1k

点赞数

文章标签： flex actionscript button library encoding 框架

本文链接：https://blog.csdn.net/gbanana/article/details/6142379

版权

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,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>

<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/

Super_man_2018

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Flex数据显示格式化与数据验证

 Formatter类 Flex框架中的Formatter类。该类将数据格式化成字符串。所有的格式化类都是mx.formatters.Formatter类的子类，包括： · CurrencyFormatter （格式化货币） · DateFormatter （格式化日期） · NumberFormatter （格式化数字） · PhoneFormatter （格式化电话号码） · ZipCodeFormat （格式化邮政编码） 
复制链接

扫一扫