这里主要讲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>
发表评论
-
全面认识Flex六大要素
2011-05-08 12:56 810在学习Flex应用程序的 ... -
Flex4之将Sprite控件添加到FLEX UI中
2011-05-08 12:54 1353在Flex的帮助文档里,有很多例子都是扩展Sprite类的。如 ... -
Flex4之元数据标签详解
2011-05-07 23:57 1281Flex 元数据标签 1、[ArrayElementT ... -
Flex4之关于Embed外部资源的使用方法
2011-05-07 20:56 1008Flex软件中经常需要 ... -
Flex之使用ActionScript构造组件
2011-05-07 20:04 904因为是专门针对ActionScript来写的篇章,所以,对于A ... -
Flex获取RGB的值,R、G、B
2011-05-06 20:35 970<?xml version="1.0" ... -
Flex自制简单菜单
2011-05-06 20:22 944<?xml version="1.0" ... -
Flex4之为ToolTip设置旋转特效及字体
2011-05-05 21:04 1739<?xml version="1.0" ... -
Flex的Alert中加入超链接
2011-05-05 20:57 1192<?xml version="1.0" ... -
FLEX4之内存释放优化原则
2011-05-05 13:28 6621. 被删除对象在外部的所有引用一定要被删除干净才能被系统 ... -
Flex4之简易MP3播放器
2011-05-03 20:55 1082<?xml version="1.0" ... -
Flex4之DataGrid示例【客户端和服务器端]
2011-05-03 19:27 1675由于我的DataGrid与JAVA后 ... -
Flex4之与后台服务器通信方式:URLRequest+URLLoader【JAVA方式】
2011-04-21 20:16 1869URLRequest是ActionScript和服务端通信的最 ... -
Flex4 事件详解
2011-04-17 16:10 962第一、Flex事件简介 ... -
向Tree空间添加删除XML数据节点_Flex4
2011-03-31 20:50 2054Flex4控件例程: 基于Http ...
相关推荐
flex 表单数据合法性验证flex 表单数据合法性验证flex 表单数据合法性验证flex 表单数据合法性验证
提供: 表单的验证 基本流程 和处理方法 小小例子
里面的每一项我都试验过 直接复制到flex就能看到效果
概念验证项目,用于研究从动态(可能是外部化的)源生成Flex表单的潜力,以减少开发常见表单功能的开发时间。 我以前使用过'control'类,以允许非技术用户在外部XML文件中配置表单验证参数,但是表单和模型仍然需要...
JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用...支持表单验证 快速获取表单数据 国际化支持
如何在一个表单内通过ToolTips来返映一个错误 15.7节. 如何使用正则表达式去定位电邮地址 15.8节. 如何使用正则表达式去验证信用卡号码 15.9节. 如何使用正则表达式来验证ISBN号 15.10节. 如何通过指定字符类...
通过栅格进行表单布局,可以嵌套使用,支持 Flex,基本可覆盖复杂的表单布局场景。 自定义 提供自定义区域和自定义样式扩展,可以简单方便的自定义自己的表单。 高级组件 提供功能强大的高级组件,可适用在各种...
形式生成器 ...支持表单验证 快速获取表单数据 支持 如果你发现了新的bug,或者有新的功能要求,请新建一个问题 浏览器支持 现代浏览器和Internet Explorer 10+。 IE浏览器/边缘 火狐浏览器 Chro
网页设计 期末大作业web课程设计【原神风格+博客静态页面】,html+css+js纯手写,div盒子布局,flex布局,瀑布流布局,绝对定位/相对定位,js登录表单验证,简洁的下拉菜单,侧边栏手风琴效果,动漫游戏博客小清新...
以完全声明的方式实现具有灵活样式和验证功能的任何Web表单 现场演示: : Stackblitz: ://stackblitz.com/edit/dashjoin 特征 支持JSON Schema Draft 6 可以从URL加载引用的架构 呈现紧凑形式 支持2路数据绑定 ...
创造形式 ...支持表单验证 快速获取表格数据 国际化支持 第三方插件 浏览器支持 现代浏览器和Internet Explorer 10+。 IE浏览器/边缘 火狐浏览器 Chrome合金 苹果浏览器 IE10,IE11,Edge 最近
html+css+js,多用flex布局,有轮播图、电梯、表单验证,适合学完js的人,可当练手,可当web期末作业,仅供参考
是一个小型的声明式表单扩展和 polyfill 库。 下载:[formx.min.js][full-min] 或 [formx.js][full] [凉亭][凉亭]: bower install formx [npm][npm]: npm install formx [组件][组件]: component install esha/...
CraueFormFlowBundle提供了一种在Symfony项目中构建和处理多步骤表单的功能。 特征: 导航(下一个,后退,重新开始) 步骤标签 跳过步骤 每个步骤都有不同的验证组 处理文件上传 动态步进导航(可选) 提交后...
block可以使用内联元素可以设置宽高,参考简易表单验证网易云课堂原生JS项目实战,表单验证技术栈:原生JS总结: viewport视窗大小自适应设置,参考布局模式之flex弹性布局,参考和min-height使用的替代是父级元素...
表单美化210311 实用css小集锦210312 Emmet210313 布局练习210314 flex实现⽔平垂直居中的最简单⽅式 flex实现双⻜翼布局 flex实现圣杯布局 瀑布流布局 模板引擎pug基本语法210315 布局练习(响应式布局)210316 ...
在美国各地显示和编辑旅行记录的个人资料信息。 接受之前验证表单数据。使用HTML(网格,flex),JS(表单,输入,创建和删除元素,验证,键)和CSS(样式,布局,错误消息)。
javascript复制到剪切板滚动加载图片生成随机字符串文件上传和下载动态字体大小元素是否在视口中限制输入滑动解锁常见表单验证UI代理LI拖拽交换商品规格组合工具提示滑块粘性导航条挪动足球 轮播轮播表格排序编辑...