`
JavaCrazyer
  • 浏览: 3012105 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

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

阅读更多

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

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

  

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

现附上图




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

<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

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的命名空间

  

<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文件的包名

 

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

 
 

  • 大小: 3.8 KB
  • 大小: 2.7 KB
3
1
分享到:
评论
3 楼 xuqi2850661 2012-02-22  
"如果开发者把一个自定义的项目推进ComboBox的数组中"  什么是自定义的项目?是list或者其他组件吗?
2 楼 JavaCrazyer 2010-09-23  
yangcan 写道
太强了,又从你这里学到了好东西。

1 楼 yangcan 2010-09-23  
太强了,又从你这里学到了好东西。

相关推荐

    flex 表单数据合法性验证

    在Flex开发中,表单数据合法性验证是至关重要的一步,它确保用户输入的数据符合应用程序的预期格式和规则,...通过理解上述知识点,我们可以有效地构建健壮的Flex表单应用,提升用户体验并减少因数据问题引发的错误。

    flex动态表单源码

    Flex动态表单源码解析与应用 Flex是一种用于构建富互联网应用程序(RIA)的技术,它基于ActionScript编程语言和Flash Player运行时环境。在Flex中,动态表单是一种强大的工具,能够根据用户需求或服务器反馈自动...

    flex组件之验证组件实例源码

    它们通常与表单控件如TextInput、ComboBox等配合使用,以确保用户提交的信息有效且正确。在Flex中,验证组件主要分为以下几类: 1. **BasicValidators**: 这些是最基础的验证器,例如RequiredValidator(验证非空...

    Flex表单校验组件

    Flex表单校验组件是基于Adobe Flex开发的一款强大的前端验证工具,它专为构建具有高效数据验证功能的用户界面而设计。在Web应用程序中,表单校验是必不可少的,因为它确保用户输入的数据符合预定义的规则,从而提高...

    flex组件介绍

    Flex中的`Form`组件用于创建数据输入表单,它能够自动布局和调整其子控件的位置,以适应不同的屏幕尺寸。`Form`组件支持多种数据绑定技术,使得数据收集和验证过程变得更加简单和高效。 #### Flex内建的UI控件 ...

    Manning.Flex .3.in.Action.Feb.2009

    - **表单组件**:Flex提供了丰富的表单组件,如TextField、ComboBox等,方便用户输入数据。 - **验证用户输入**:通过ActionScript 3.0编写验证逻辑,确保用户输入的数据符合预期格式和范围。 - **数据绑定**:利用...

    Flex 3 组件实例与应用(2009版)

    通过以上对《Flex 3 组件实例与应用》一书中提到的各类组件的介绍,我们可以看出Flex 3提供的组件不仅涵盖了基本的UI需求,还包括了高级的交互、数据展示和验证等功能。这使得开发者能够在构建复杂的应用程序时更加...

    Flex UI组件使用全集

    ### Flex UI组件使用全集详解 #### 概述 本文档是基于阿树对Adobe Flex UI组件库的全面整理,并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架,尤其适用于创建...

    《Flex 3 组件实例与应用(2009版)》(PDF)

    Validators用于验证输入数据的有效性,包括信用卡验证、货币验证、日期验证、电子邮件验证、数值验证、电话号码验证、正则表达式验证和社会安全号验证。 #### Formatters Formatters用于格式化显示数据,包括货币...

    flex4.5学习笔记

    ### Flex4.5学习笔记知识点总结 #### 一、Flex基础——布局 **知识点1:Flex布局** - **垂直布局** (`s:VerticalLayout`): 控件垂直排列。 - **水平布局** (`s:HorizontalLayout`): 控件水平排列。 - **平铺布局**...

    ExtJs中文教程

    - 介绍如何实现表单数据的有效性验证。 #### 十八、FormPanel布局与初始化 1. **布局概述** - 解释布局在ExtJs中的重要性。 2. **分割布局** - 展示如何使用Flex布局和其他布局策略来组织FormPanel内部元素。 3....

Global site tag (gtag.js) - Google Analytics