Book10-No.15 运用格式化和验证器 _Web前端

Book10-No.15 使用格式化和验证器

1、格式化器：继承了Formatter类

mx.formatter.CurrecyFormatter （货币格式化数值，货币符号，小数点后几位）
mx.formatter.DateFormatter（格式化时间）
mx.formatter.NumberFormatter
mx.formatter.PhoneFormatter
mx.formatter.ZipCodeFormatter（格式化邮政编码）

示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the CurrencyFormatter. -->
<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/mx">
	
	<fx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			
			private var vResult:ValidationResultEvent;
			
			// Event handler to validate and format input.
			private function Format():void {
				vResult = numVal.validate();
				
				if (vResult.type==ValidationResultEvent.VALID) {
					var temp:Number = Number(priceUS.text); 
					formattedUSPrice.text = usdFormatter.format(temp);
				} else {
					formattedUSPrice.text = "";
				}
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<mx:CurrencyFormatter id="usdFormatter" precision="2" 
							  currencySymbol="￥" decimalSeparatorFrom="."
							  decimalSeparatorTo="." useNegativeSign="true" 
							  useThousandsSeparator="true" alignSymbol="right"/>
		
		<mx:NumberValidator id="numVal" source="{priceUS}" property="text" 
							allowNegative="true" domain="real"/>
	</fx:Declarations>
	
	<s:Panel title="CurrencyFormatter Example"
			 width="75%" height="75%"
			 horizontalCenter="0" verticalCenter="0">
		<mx:Form left="10" right="10" top="10" bottom="10">
			<mx:FormItem label="Enter U.S. dollar amount:">
				<s:TextInput id="priceUS" text="" width="50%"/>
			</mx:FormItem>
			<mx:FormItem label="Formatted amount: ">
				<s:TextInput id="formattedUSPrice" text="" width="50%" editable="false"/>
			</mx:FormItem>
			<mx:FormItem>
				<s:Button label="Validate and Format" click="Format();"/>
			</mx:FormItem>
		</mx:Form>
	</s:Panel>
	
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the DateFormatter. -->
<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/mx">
	
	<fx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			
			private var vResult:ValidationResultEvent;
			
			// Event handler to validate and format input.
			private function Format():void {
				vResult = dateVal.validate();
				if (vResult.type == ValidationResultEvent.VALID) {
					formattedDate.text = dateFormatter.format(dob.text);
				} else {
					formattedDate.text = "";
				}
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<mx:DateFormatter id="dateFormatter" formatString="month: MM, day: DD, year: YYYY"/>
		<mx:DateValidator id="dateVal" source="{dob}" property="text" inputFormat="mm/dd/yyyy"/>
	</fx:Declarations>
	
	<s:Panel title="DateFormatter Example" width="75%" height="75%" horizontalCenter="0" verticalCenter="0">
		<mx:Form left="10" right="10" top="10" bottom="10">
			<mx:FormItem label="Enter date (mm/dd/yyyy):" width="100%">
				<s:TextInput id="dob" text=""/>
			</mx:FormItem>
			<mx:FormItem label="Formatted date: " width="100%">
				<s:TextInput id="formattedDate" text="" editable="false"/>
			</mx:FormItem>
			<mx:FormItem>
				<s:Button label="Validate and Format" click="Format();"/>
			</mx:FormItem>
		</mx:Form>
	</s:Panel>
	
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate NumberFormatter. -->
<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/mx">
	
	<fx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			
			private var vResult:ValidationResultEvent;
			
			// Event handler to validate and format input.
			private function Format():void {
				vResult = numVal.validate();
				if (vResult.type == ValidationResultEvent.VALID) {
					formattedNumber.text = numberFormatter.format(inputVal.text);
				} else {
					formattedNumber.text = "";
				}
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<mx:NumberFormatter id="numberFormatter" precision="4" 
							useThousandsSeparator="true" useNegativeSign="true"/>
		
		<mx:NumberValidator id="numVal" source="{inputVal}" property="text" 
							allowNegative="true" domain="real"/>
	</fx:Declarations>
	
	<s:Panel title="NumberFormatter Example"
			 width="75%" height="75%"
			 horizontalCenter="0" verticalCenter="0">
		<mx:Form left="10" right="10" top="10" bottom="10">
			<mx:FormItem label="Enter number:">
				<s:TextInput id="inputVal" text="" width="50%"/>
			</mx:FormItem>
			<mx:FormItem label="Formatted number (precision=4): ">
				<s:TextInput id="formattedNumber" editable="false" width="50%"/>
			</mx:FormItem>
			<mx:FormItem>
				<s:Button label="Validate and Format" click="Format();"/>
			</mx:FormItem>
		</mx:Form>
	</s:Panel>
	
</s:Application>

2、验证器：继承了Valicator类，用于检查用户输入的是否正确