Flex4之简单表单验证

 关于Flex4的验证，有好几种，主要包括DateValidtor,EmailValidator,NumberValidator,StringValidator等等，具体每一项的验证可以参考那个AIR桌面程序

 

 

贴上主要验证代码

validatorForm.mxml

<?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/mx" 
			   skinClass="components.TDFPanelSkin"
		>
	
	<fx:Script>
		<![CDATA[
			import components.TDFPanelSkin;
			
			import mx.controls.Alert;
			import mx.events.ValidationResultEvent;
			import mx.validators.Validator;
			
			//单独验证某一项
			function validateAge():void{
			 var vd:ValidationResultEvent=numVD.validate();
			
			}
			
			//执行所有验证的验证
			function vaidateForm():void{
			 var all:Array=Validator.validateAll([numVD,dateVD,emailVD]);
 if(all.length==0){
			     Alert.show("验证成功");
				 //这里可以发送请求进行表单提交任务
		    	}
			
			}
			
			
			//NumberValidator中要么使用triggerEvent='click'不用调用任何方法，要么就triggerEven="",在textInput中调用validate方法
		]]>
	</fx:Script>

	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	
	<fx:Declarations>
		<mx:NumberValidator id="numVD" source="{age}" property="text" integerError="Enter Integer value"
							minValue="18" maxValue="50" domain="int" 
							trigger="{myButton}" triggerEvent=""
							valid="Alert.show('numValidation Succeeded!');"
							
							/>
		<mx:DateValidator id="dateVD" source="{mydate}" property="text" allowedFormatChars="/" 
						  trigger="{myButton}" triggerEvent="click" 
						  valid="Alert.show('Validation Succeeded!');"/>
		<mx:EmailValidator id="emailVD" source="{email}" triggerEvent="" property="text"/>
	</fx:Declarations>
	
	<s:Panel title="NumberValidator Example" width="600" height="100%"
			 color="0x000000" 
			 borderAlpha="0.15" >
		
		<s:layout>
			<s:HorizontalLayout horizontalAlign="center" 
								paddingLeft="10" paddingRight="10" 
								paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<mx:Form color="0x323232">
			<mx:FormItem label="age">
				<s:TextInput id="age" height="40" width="100%" fontSize="18"/>
			</mx:FormItem>
			<mx:FormItem label="date【mm/dd/yyyy】">
				<s:TextInput id="mydate" height="40" width="100%" fontSize="18"/>
			</mx:FormItem>
			<mx:FormItem label="email">
				<s:TextInput id="email" height="40" width="100%" fontSize="18"/>
			</mx:FormItem>
			<mx:FormItem >
				<s:Button id="myButton" label="Validate" click="vaidateForm()" />
			</mx:FormItem>
		</mx:Form>
		
	</s:Panel>
	
</s:Application>

 

 

 

每一项不符合要求时，点击验证按钮，在回到输入框中，后面都会出现相应的错误的提示，直到输入成功为止