Flex4表单验证【重点说明comboBox验证】

上次说到了简单的表单验证，可以配置错误信息，点击按钮可以进行所有表单验证，那么如果验证都通过，怎样执行提交任务呢？一般都会这么处理，下面这个是button点击事件处理方法

<SPAN style="FONT-SIZE: medium">function vaidateForm():void{
 var all:Array=Validator.validateAll([numVD,emailVD,comboValidator]);
    if(all.length==0){
      Alert.show("验证成功");
     //这里可以发送请求进行表单提交任务
  }
 }</SPAN>

function vaidateForm():void{
 var all:Array=Validator.validateAll([numVD,emailVD,comboValidator]);
    if(all.length==0){
      Alert.show("验证成功");
     //这里可以发送请求进行表单提交任务
  }
 }

  

 关于错误信息提示方面，有人说到字体太小了不好看，那么针对这个问题肯定是样式没有配好，就如同提示框的字体太小一样都可以进行style设置的

现附上图

 类似于这样的效果，配置如下

<SPAN style="FONT-SIZE: medium"><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></SPAN>

<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>

 接下来就说下comboBox的验证了，这个在普通验证里面是找不到的必须自己手写

 ComboValidator.as

<SPAN style="FONT-SIZE: medium">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;
        }
    }
}</SPAN>

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;
		}
	}
}

 具体使用代码,使用之前先配下Application的命名空间

  

<SPAN style="FONT-SIZE: medium"><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.*"
               creationComplete="init()"
        ></SPAN>

<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.*"
			   creationComplete="init()"
		>

  看到那个cookbook的没有，就是配上那个,orelilly.cookbook是as文件的包名

 

 

<SPAN style="FONT-SIZE: medium"><fx:Declarations>
<cookbook:ComboValidator prompt="myCombox" id="comboValidator" error="请选择一项"    source="{myCombox}" property="selectedItem"/>
</fx:Declarations></SPAN>