在flex实现数据验证(1)
来源:互联网 发布:bt磁力搜索网站 知乎 编辑:程序博客网 时间:2024/05/16 13:53
数据验证是表单永远的话题,可能大家想也没想过,在flash中居然也会有验证控件,简单的如同asp.ner的验证控件.下面我们一起来体验一下.
as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类
1.绑定验证对象
1.Validator有两个主要属性
[color=Red]source[/color]:表示验证的对象(比如验证一个文本框,它的ID为phoneInput,则soure属性应绑定这个对象.
source="{phoneInput}"
[color=Red]property[/color]:表示验证对象的属性(一个对象有很多属性,但你未指定验证哪一项,TextInput有一个text属性,就是我们的输入文本.所以表示验证的数据为text)
[img]http://www.clingingboy.com/blog/uploads/200607/03_222231_snap1.jpg[/img]
可能大家还是喜欢看效果,下面来看一个简单的例子,还是拿帮助文件的例子来讲
PhoneNumberValidator为一个验证电话号码的控件
代码一
xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/><mx:TextInput id="phoneInput"/><mx:TextInput id="zipCodeInput"/>< SPAN>mx:Application>
下面试一下效果吧
先把鼠标放在第一个文本框上,然后鼠标移出,会发现文本眶颜色变为红色,表明验证未通过.再次将鼠标移到文本眶上如果文本没有输入任何文字的话,会出现默认提示(this field is required),表明此项为必填,如果验证结果与输入不符合的话会出现默认错误提示(your telephone number must contain at least 10 dights)
[flash]http://www.clingingboy.com/blog/uploads/200607/03_223220_text5.swf[/flash]
如果你不喜欢使用标签的话,你也可以以编程的方式来实现以上效果,当然如果简单验证的话,用标签就够了.以下使用编程实现验证
示例二
xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script>[CDATA[// Import PhoneNumberValidator.import mx.validators.PhoneNumberValidator;// Create the validator.private var v:PhoneNumberValidator = new PhoneNumberValidator();private function createValidator():void {// Configure the validator.v.source = phoneInput;v.property = "text";}]]>< SPAN>mx:Script><mx:TextInput id="phoneInput" creationComplete="createValidator();"/><mx:TextInput id="zipCodeInput"/>< SPAN>mx:Application>
2.使用按钮触发验证
第一个例子虽然实现了验证,但感觉验证的功能是可有可无的,当我们把鼠标移到文本眶上再移出才出发验证.如果我们预先不把鼠标移到文本眶上,这个验证就算无效了.我们可以利用按钮检查验证是否通过.如果验证未通过则文本眶显红色.
Validator还有两个属性
trigger:表示触发验证事件的对象
triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)
了解以上两个属性的话就可以解决第一个例子的问题了.看以下代码
xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"trigger="{btn}" triggerEvent="click" /><mx:TextInput id="phoneInput"/><mx:Button label="Button" id="btn"/>< SPAN>mx:Application>
试一下效果吧,现在你可以不用先把鼠标移动到文本眶上,直接点击按钮,你将发现文本眶显红色.现在你该明白了吧.
[flash]http://www.clingingboy.com/blog/uploads/200607/03_225428_text5.swf[/flash]
[b]3.修改默认提示错误[/b]
验证控件在默认情况下已经给出默认的提示错误,我们看E文肯定不爽,可否修改默认提示?当然可以.
Validator基类有一个requiredFieldError属性 表示必填项没填入数据的时的提示错误信息
然后呢每个验证控件都有自己不同的验证机制,属性也不相同,如PhoneNumberValidator有一个属性
wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息
invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息
了解上面两个属性后,再看看效果
xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"trigger="{btn}" triggerEvent="click"requiredFieldError="此项为必填" invalidCharError="请输入阿拉伯数字" wrongLengthError="请至少输入请输入10个阿拉伯数字" /><mx:TextInput id="phoneInput"/><mx:Button label="Button" id="btn"/>< SPAN>mx:Application>
[flash]http://www.clingingboy.com/blog/uploads/200607/03_232442_text5.swf[/flash]
好了,最简单的讲完了.介绍了三个功能,其实也就学习几个属性而已,不知道大家感不感兴趣,当然还有其他验证,并没这么简单,有时间再跟大家分享.上面讲的三点你学会了吗?
- 在flex实现数据验证(1)
- flex的数据验证!
- flex的数据验证!
- FLEX验证数据的基本原则
- Flex 3入门教程:验证数据
- flex与java实现数据库数据在页面分页
- Flex数据显示格式化与数据验证
- Flex数据显示格式化与数据验证
- 自定义flex的数据验证组件!
- 自定义flex的数据验证组件!
- 三种方法在Infopath中实现数据有效性验证
- 在kettle中实现数据验证和检查
- 聚合数据手机验证码在ThinkPHP中实现
- Flex入门——实现Flex验证处理
- 如何实现Flex验证处理的Flex入门
- Flex dataGrid实现数据过滤
- Flex dataGrid实现数据过滤
- JavaScript实现数据验证
- asp.net控件开发基础(2)
- asp.net控件开发基础(1)
- javascript检测 .net Framework
- 给你一年的时间,你能了解.net多少?
- 一个类控制不同种类控件的同时启用或停用
- 在flex实现数据验证(1)
- Reports Starter Kit详细介绍(二)
- Reports Starter Kit详细介绍(一)
- Reports Starter Kit简介(附数据库下载)
- 下载:微软网页设计工具CTP测试版(支持asp.net2.0)
- E-Commerce Starter Kit 数据库表和存储过程一览
- 学习E-Commerce Starter Kit (1)
- c#泛型学习(二)
- c#2.0泛型学习(一)