Flex3 表单验证

设想一个场景：一个表单有多个字段需要验证，当且仅当所有验证都成功时，提交按钮才可用。代码如下：

    test.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" creationComplete="init()">
	<mx:Panel width="400" height="300">
		<mx:Form>
			<mx:FormItem label="地址" required="true" >
				<mx:TextInput id="address"  />
			</mx:FormItem>
			<mx:FormItem label="电话"  required="true" >
				<mx:TextInput id="phone" />
			</mx:FormItem>			
		</mx:Form>
		<mx:ControlBar horizontalAlign="right">
			<mx:Button id="submit" label="提交" enabled="false"/>
		</mx:ControlBar>
	</mx:Panel>
	
	<mx:Array id="validators">
		<mx:Validator required="true" requiredFieldError="地址不能为空!" source="{address}" property="text" />
		<mx:Validator required="true" requiredFieldError="电话不能为空!" source="{phone}" property="text" />
	</mx:Array>
	
	<mx:Script>
		<![CDATA[
			private var formValidator:FormValidator=new FormValidator();
		
			private function init():void{
				formValidator.addValidators(validators);
				formValidator.failedCallBack=function():void{
					submit.enabled=false;
				};
				formValidator.passedCallBack=function():void{
					submit.enabled=true;
				};
			}
			
		]]>
	</mx:Script>
</mx:Application>

 FormValidator.as

  

public function addValidator( validator : Validator) : void {
        	if(!validators.contains(validator)){
        			validator.trigger=this;
        			validator.triggerEvent=Event.CHANGE;
        			validator.source.addEventListener(FlexEvent.VALUE_COMMIT,onChange);
        			validator.source.addEventListener(Event.CHANGE,onChange);
        		
        			validator.addEventListener(ValidationResultEvent.INVALID,function(event:ValidationResultEvent):void{
        				voteMap[event.target.source]=false;
        				_failedCallBack();
        			});
        			validator.addEventListener(ValidationResultEvent.VALID,function(event:ValidationResultEvent):void{
        				voteMap[event.target.source]=true;        				
			        	refresh();
        			});
        			validators.addItem(validator);
        	}
}

  private function onChange(event:Event):void{
         dispatchEvent(new Event(Event.CHANGE));
  }

 

    详细代码看附件:)

 

评论

5 楼 tof.j 2009-04-02  

不错，原来Flex还有表单验证。正好可以用上,flex的代码简洁，界面漂亮。用来做表现层就是酷

4 楼 Archie 2009-03-18  

everest668 写道

LZ你好
按照你提供的代码，在mxml文件中提示“调用了可能未定义的方法addValidators”，也就是说actionscript文件中的方法没有被引用到。

这两个文件都放在了flex 项目中 src目录下，请问该如何操作才能正常引用？

你用下载的代码，别copy页面上的。

3 楼 everest668 2009-03-13  

LZ你好
按照你提供的代码，在mxml文件中提示“调用了可能未定义的方法addValidators”，也就是说actionscript文件中的方法没有被引用到。

这两个文件都放在了flex 项目中 src目录下，请问该如何操作才能正常引用？

2 楼 dearmite 2009-03-09  

不错,不错,正填补了,form 验证完之后的处理..

1 楼 wills 2009-03-04  

不错,正是我所需要的~! Flex 中的验证正缺少一个集合验证~!