Flex4表单验证

这里主要讲Combox的验证。其他几个略带说说。

 

 

Combox的AS代码：

package oreilly.cookbook
{
	import mx.validators.ValidationResult;
	import mx.validators.Validator;
	public class ComboValidator extends Validator
	{
		// 如果ComboBox中没有项目被选中, 则返回这个错误信息
		public var error:String;
		//如果开发者把一个自定义的项目推进ComboBox的数组中(这种情况我见过不少)
		//我们就会把这个项跟已选取的项进行对比。
		public var prompt:String;
		public function ComboValidator() {
			super();
		}
		//在这里我们进行两个检查:
		//1. comboBox中有没有项目被选中
		//2. 开发者有没有为comboBox加入自定义的项目
		//任何一个条件为ture的话, 则返回一个错误
		override protected function doValidation(value:Object):Array
		{
			var results:Array = [];
			if(value as String == prompt || value == null) {
				var res:ValidationResult = new ValidationResult(true, "", "", error);
				results.push(res);
			}
			return results;
		}
	}
}

 

主程序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"
			   xmlns:cookbook="oreilly.cookbook.*">
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	
	<fx:Style>  
		@namespace s "library://ns.adobe.com/flex/spark";   
		@namespace mx "library://ns.adobe.com/flex/mx";   
		.errorTip   
		{   
			fontSize:16;   
		}    
		mx|Alert{   
			fontSize:16;   
		}   
	</fx:Style>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.ValidationResultEvent;
			import mx.validators.Validator;
			
			var data:ArrayCollection = new ArrayCollection(["省份","地区","邮编","区号"]) ;
		
			//单独验证某一项
			function validateAge():void{
				var vd:ValidationResultEvent=numVD.validate();
				
			}
			
			//执行所有验证的验证
			function vaidateForm():void{
				var all:Array=Validator.validateAll([numVD,dateVD,emailVD,comboValidator]);
				if(all.length==0){
					Alert.show("验证成功");
					//这里可以发送请求进行表单提交任务
				}
				
			}
			
			
			//NumberValidator中要么使用triggerEvent='click'不用调用任何方法，要么就triggerEven="",在textInput中调用validate方法
		]]>
	</fx:Script>
	
	
	
	<fx:Declarations>
		<cookbook:ComboValidator prompt="myCombox" id="comboValidator" error="请选择一项"    source="{myCombox}" property="selectedItem"/>  
		
		<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" >
		
		<mx:Form color="0x323232">
			<mx:FormItem label="address">
				<s:ComboBox id="myCombox" height="40" width="100%" fontSize="18" dataProvider="{data}"/>
			</mx:FormItem>
			<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>