`

flex格式化组件

    博客分类:
  • flex
阅读更多
--转载:http://demojava.iteye.com/blog/1337115
1.货币格式化

Xml代码 
<mx:CurrencyFormatter id="CurrencyDisplay" alignSymbol="right" currencySymbol="¥"/> 
<mx:CurrencyFormatter id="CurrencyDisplay" alignSymbol="right" currencySymbol="¥"/> 
  <mx:CurrencyFormatter id="CurrencyDisplay" alignSymbol="right" currencySymbol="¥"/>
  <mx:CurrencyFormatter id="CurrencyDisplay" alignSymbol="right" currencySymbol="¥"/>


2.日期格式化

Xml代码 
1.<mx:DateFormatter id="DateDisplay"   
2.        formatString="MMMM D, YYYY"/> 
3.<mx:DateFormatter id="DateDisplay1"   
4.        formatString="YYYY-MM-DD"/> 
5.        <mx:Label text="未格式化的日期:{today}"/> 
6.        <mx:Label text="格式化后的日期:{DateDisplay.format(today)}"/>  
<mx:DateFormatter id="DateDisplay"
        formatString="MMMM D, YYYY"/>
<mx:DateFormatter id="DateDisplay1"
        formatString="YYYY-MM-DD"/>
    <mx:Label text="未格式化的日期:{today}"/>
    <mx:Label text="格式化后的日期:{DateDisplay.format(today)}"/>


3.数字格式化

Xml代码 
1.<mx:NumberFormatter id="NumberDisplay" /> 
2.<mx:Label text="未格式化的数字:{num}"/> 
3.<mx:Label text="格式化后的数字:{NumberDisplay.format(num)}"/>  
<mx:NumberFormatter id="NumberDisplay" />
<mx:Label text="未格式化的数字:{num}"/>
<mx:Label text="格式化后的数字:{NumberDisplay.format(num)}"/>

用NumberFormat 类,设置掩码,然后调用format( ) 方法。
虽然自己都可以做到这种效果,但是你会发现用NumberFormat 对象更简单更灵活。
NumberFormat 类是个自定义类,可到http://www.rightactionscript.com/ascb下载。使用它须先导
入:import ascb.util.NumberFormat:
接下来决定是什么掩码进行格式化,它可以是0,#,.,,,或者其他。
零(0)
使用零作为占位符
井号(#)
点号(.)
逗号(,)
下面看一下例子:掩码如下:
##,###.0000
格式化如下数字:1.2345, 12.345, 123.45, 1234.5, 和12345, 结果:
1.2345
12.3450
123.4500
1,234.5000
12,345.0000
通过构造函数直接传入参数作为掩码:
var styler:NumberFormat = new NumberFormat("##,###.0000");
另外,使用属性进行修改掩码:
styler.mask = "##.00";
设置好掩码,调用format( ) 方法就可以格式化数字了:
例如:trace(styler.format(12345);

var styler:NumberFormat = new NumberFormat("#,###,###,###");
trace(styler.format(1));
trace(styler.format(12));
trace(styler.format(123));
trace(styler.format(1234));
styler.mask = "#,###,###,###.0000";
trace(styler.format(12345));
trace(styler.format(123456));
trace(styler.format(1234567));
trace(styler.format(12345678));
trace(styler.format(123456789));
输出如下:
1
12
123
1,234
12,345.0000
123,456.0000
1,234,567.0000
12,345,678.0000
123,456,789.0000
NumberFormat 对象自动本地化返回值。如果Flash 播放器在英文操作系统上运行,
NumberFormat 类是用逗号和点号,如果在法语操作系统上运行,正好相反,使用点号和逗号,
因此需要覆盖自动本地化:
有几种方法覆盖自动本地化设置:
把Locale 对象作为format( ) 方法的第二个参数,format( ) 方法根据Locale 对象的设置进行格
式化。Locale 对象使用两个参数,第一个是语言代码,如en,第二个参数为国家代码,如
EN.
通过全局设置Locale.slanguage 或Locale.svariant 属性就不需要给format( ) 方法传递参数了
使用符号对象作为format( )的第二个参数,包括两个属性:group和decimal。该方法适合没有
用Locale对象进行全局设置下使用。
Locale 类在ascb.util 包中,使用前导入。
下面的代码展示了三种方法:
var styler:NumberFormat = new NumberFormat("#,###,###,###.00");
Locale.slanguage = "fr";
trace(styler.format(1234));
trace(styler.format(12345, {group: ",", decimal: "."}));
trace(styler.format(123456));
Locale.slanguage = "en";
trace(styler.format(1234567));
trace(styler.format(12345678, new Locale("es", "ES")));
trace(styler.format(123456789, {group: "|", decimal: ","}));
结果:
1.234,00
12,345.00
123.456,00
1,234,567.00
12.345.678,00
123|456|789,00
var styler:NumberFormat = new NumberFormat( );
trace(styler.format(12.3));
trace(styler.format(123.4));
trace(styler.format(1234.5));
trace(styler.format(12345.6));
正像上一节所说的,仍然有本地化问题,本地化处理和上一节一样:
var styler:NumberFormat = new NumberFormat( );
Locale.slanguage = "fr";
trace(styler.format(1234, new Locale("en")));
trace(styler.format(12345, {group: ":", decimal: "|"}));
trace(styler.format(123456));

2.格式化货币数字
不像其他语言,比如ColdFusion,ActionScript 没有提供内建的函数格式化货币数字。自定义类
NumberFormat 包括一个currencyFormat( )方法。
currencyFormat( ) 至少需要一个参数,看下面的简单代码:
var styler:NumberFormat = new NumberFormat( );
trace(styler.currencyFormat(123456));
在英文操作系统上运行结果如下:
$123,456.00
和format( ) 方法类似,currencyFormat( ) 方法根据自动本地化设置进行格式化。因此,如果上
面的代码在西班牙语操作系统上运行结果如下:
123.456,00
覆盖自动本地化方法和format()类似:
使用Locale 对象作为currencyFormat( )的第二个参数.
赋全局变量给Locale.slanguage 和Locale.svariant 属性
使用字符对象作为currencyFormat( )的第二个参数.
currencyFormat( ) 的字符对象比format( ) 方法中稍微不一样,它包括4个属性: group, decimal,
currency, 和before。group 和decimal 属性和format( ) 方法一样。currency 属性为货币符号,
before 为布尔值,表示货币符号的位置。
下面是currencyFormat( )的一些例子代码:
var styler:NumberFormat = new NumberFormat( );
trace(styler.currencyFormat(123456));
Locale.slanguage = "nl";
trace(styler.currencyFormat(123456));
trace(styler.currencyFormat(123456, new Locale("sv")));
trace(styler.currencyFormat(123456, {group: ",", decimal: ".", currency: "@", before: false}));
输出结果:
$123,456.00
123.456,00
123,456.00kr
123,456.00@

格式化日期和时间
Date.toString( )方法返回Date对象的字符串类型数值,比如:
// 显示: Tue Jan 5 14:25:20 GMT-0800 2010
对象输出标准的美国日期格式:
var formatter:DateFormat = new DateFormat("m/d/Y");
一旦创建了DateFormat对象,调用format()方法,通过指定的掩码格式化Date实例:
var example:Date = new Date(2010, 0, 5, 10, 25);
var formatter:DateFormat = new DateFormat("m/d/Y");
trace(formatter.format(example)); // 显示: 01/05/2010
formatter.mask = "m/d/Y h:i a";
// 显示: 01/05/2010 10:25 am

4.电话格式化

Xml代码 
1.<mx:PhoneFormatter id="TelephoneDisplay" formatString="####-########"/> 
2.<mx:Label text="未格式化的电话:{telephone}"/> 
3.<mx:Label text="格式化后的电话:{TelephoneDisplay.format(telephone)}"/>  
<mx:PhoneFormatter id="TelephoneDisplay" formatString="####-########"/>
<mx:Label text="未格式化的电话:{telephone}"/>
<mx:Label text="格式化后的电话:{TelephoneDisplay.format(telephone)}"/>


5.邮编格式化

Xml代码 
1.<mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####"/> 
2.<mx:Label text="北美标准的邮编:{ZipCodeDisplay.format(ZipCode)}"/>  
<mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####"/>
<mx:Label text="北美标准的邮编:{ZipCodeDisplay.format(ZipCode)}"/>



6.正则表达式

Xml代码 
1.<?xml version="1.0" encoding="utf-8"?> 
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
3.    <mx:Style source="OSX.css"/> 
4.    <mx:Script> 
5.        <![CDATA[ 
6.            import mx.utils.StringUtil;//引用StringUtil类 
7.            import mx.controls.Alert;//引用Alert类 
8.             
9.            private var regExp_Username:RegExp=/\w+/;//定义对用户名验证的正则表达式 
10.            private var regExp_Password:RegExp=/[a-z0-9A-Z]+/;//定义对密码验证的正则表达式 
11.            private var regExp_Email:RegExp=/[a-z0-9A-Z]+@[a-z0-9A-Z]+(\.[a-z0-9A-Z]+)+/;//定义对Email验证的正则表达式 
12.            private var regExp_Address:RegExp=/\w+/;//定义对地址验证的正则表达式 
13.            private var regExp_Phone:RegExp=/13\d{9}|15\d{9}/;//定义对手机验证的正则表达式 
14.             
15.            private var wrongFlag:Boolean=false;//验证错误标识 
16.                 
17.            private function registerHandle():void//注册处理函数 
18.            { 
19.                wrongFlag=false;//初始化错误标识 
20.                //若用户名或密码为空 
21.                if(StringUtil.trim(txtUsername.text)=="" 
22.                    ||StringUtil.trim(txtPassword.text)=="" 
23.                    ||StringUtil.trim(txtRePassword.text)=="") 
24.                    Alert.show("用户名或密码不能为空"); 
25.                else 
26.                { 
27.                    /*验证用户名*/ 
28.                    var array_Username:Array=regExp_Username.exec(StringUtil.trim(txtUsername.text));//将匹配正则表达式的结果存于数组中 
29.                    //输入的用户名不在验证数组内,表示用户名不合法 
30.                    if(wrongFlag==false 
31.                        &&(array_Username==null||array_Username.lastIndexOf(StringUtil.trim(txtUsername.text))<0)) 
32.                        { 
33.                            Alert.show("用户名只能由数字、字母、下划线、汉字组成"); 
34.                            wrongFlag=true; 
35.                        } 
36.                         
37.                    /*验证密码*/ 
38.                    var array_Password:Array=regExp_Password.exec(StringUtil.trim(txtPassword.text));//将匹配正则表达式的结果存于数组中 
39.                    //输入的密码不在验证数组内,表示密码不合法 
40.                    if(wrongFlag==false 
41.                        &&(array_Password==null||array_Password.lastIndexOf(StringUtil.trim(txtPassword.text))<0)) 
42.                        { 
43.                            Alert.show("密码只能由数字、字母组成"); 
44.                            wrongFlag=true; 
45.                        } 
46.                    var array_RePassword:Array=regExp_Password.exec(StringUtil.trim(txtRePassword.text));//将匹配正则表达式的结果存于数组中 
47.                    //输入的密码不在验证数组内,表示密码不合法 
48.                    if(wrongFlag==false 
49.                        &&(array_RePassword==null||array_RePassword.lastIndexOf(StringUtil.trim(txtRePassword.text))<0)) 
50.                        { 
51.                            Alert.show("密码只能由数字、字母组成"); 
52.                            wrongFlag=true; 
53.                        } 
54.                     
55.                    /*验证Email*/ 
56.                    var array_Email:Array=regExp_Email.exec(StringUtil.trim(txtEmail.text));//将匹配正则表达式的结果存于数组中 
57.                    //输入的Email不在验证数组内,表示Email不合法 
58.                    if(wrongFlag==false&&StringUtil.trim(txtEmail.text)!="" 
59.                        &&(array_Email==null||array_Email.lastIndexOf(StringUtil.trim(txtEmail.text))<0)) 
60.                        { 
61.                            Alert.show("Email格式错误,应该形如'sss@aa.com'"); 
62.                            wrongFlag=true; 
63.                        } 
64.                     
65.                    /*验证地址*/ 
66.                    var array_Address:Array=regExp_Address.exec(StringUtil.trim(txtAddress.text));//将匹配正则表达式的结果存于数组中 
67.                    //输入的Email不在验证数组内,表示Email不合法 
68.                    if(wrongFlag==false&&StringUtil.trim(txtAddress.text)!="" 
69.                        &&(array_Address==null||array_Address.lastIndexOf(StringUtil.trim(txtAddress.text))<0)) 
70.                        { 
71.                            Alert.show("地址只能由数字、字母、下划线、汉字组成"); 
72.                            wrongFlag=true; 
73.                        } 
74.             
75.                    /*验证手机号*/ 
76.                    var array_Phone:Array=regExp_Phone.exec(StringUtil.trim(txtPhone.text));//将匹配正则表达式的结果存于数组中 
77.                    //输入的手机号不在验证数组内,表示手机号不合法 
78.                    if(wrongFlag==false&&StringUtil.trim(txtPhone.text)!="" 
79.                        &&(array_Phone==null||array_Phone.lastIndexOf(StringUtil.trim(txtPhone.text))<0)) 
80.                        { 
81.                            Alert.show("手机格式错误,以'13'或'15'开头,后连9位数字"); 
82.                            wrongFlag=true; 
83.                        } 
84.                                     
85.                    //若两次密码输入不同 
86.                    if(wrongFlag==false 
87.                        &&StringUtil.trim(txtPassword.text).toLowerCase()!=StringUtil.trim(txtRePassword.text).toLowerCase())    
88.                        { 
89.                            Alert.show("两次密码输入不同"); 
90.                            wrongFlag=true; 
91.                        } 
92.                         
93.                    //注册成功 
94.                    if(wrongFlag==false) 
95.                        Alert.show("注册成功"); 
96.                } 
97.            }    
98.        ]]> 
99.    </mx:Script> 
100.    <mx:Panel title="用户注册" width="369" height="301" x="147.5" y="51" layout="absolute"> 
101.        <mx:Label text="用户名" x="35" y="10"/> 
102.        <mx:TextInput x="102" y="9" id="txtUsername"/><!--“用户名”输入框--> 
103.        <mx:Label text="密码" x="35" y="40"/> 
104.        <mx:TextInput x="102" y="39" displayAsPassword="true" id="txtPassword"/><!--“密码”输入框--> 
105.        <mx:Label text="确认密码" x="35" y="70"/> 
106.        <mx:TextInput x="102" y="69" displayAsPassword="true" id="txtRePassword"/><!--“确认密码”输入框--> 
107.        <mx:Label text="Email" x="35" y="124"/> 
108.        <mx:TextInput x="102" y="123" id="txtEmail"/><!--“Email”输入框--> 
109.        <mx:Label text="家庭地址" x="35" y="156"/> 
110.        <mx:TextInput x="102" y="155" id="txtAddress"/><!--“家庭地址”输入框--> 
111.        <mx:Label text="手机" x="35" y="189"/> 
112.        <mx:TextInput x="102" y="188" id="txtPhone"/><!--“手机号”输入框--> 
113.        <mx:Label x="35" y="99" text="以下信息可选" color="#FB1616"/> 
114.        <mx:Button x="111" y="231" label="注册" id="btnRegister" click="registerHandle();"/><!--“注册”按钮--> 
115.    </mx:Panel> 
116.</mx:Application> 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics