| 网站首页 | 免费课件 | 课件源码 | 课件制作 | 课件购买 | 课件教程 | 课堂内外 | 教案 | 试卷 | 论文 | 电脑 | 教案下载 | 
 | 试卷下载 | 论文下载 | 计划总结 | 新闻资讯 | 行业范文 | 图片 | 留言 | 术语大全 | 搞笑 | 字体 | 短信 | Flash视频教程 | 
 | 办公软件视频 | 编程设计视频 | 热门视频 | 课件论坛 | 作文写作 | 
您现在的位置: 教育资源网 >> 课件教程 >> Flash教程 >> Flash脚本教程 >> 正文 用户登录 新用户注册
免费精品 课件源程序下载 课件点播 课件定做 课件复原 课件制作指导 毕业设计 更多服务
Google




Flash脚本教程——在flex实现数据验证(1)
作者:佚名    教程来源:佚名    点击数:    更新时间:2006-9-4         ★★★ 【字体:
 数据验证是表单永远的话题,可能大家想也没想过,在flash中居然也会有验证控件,简单的如同asp.ner的验证控件.下面我们一起来体验一下.
as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类
1.绑定验证对象
1.Validator有两个主要属性
source:表示验证的对象(比如验证一个文本框,它的ID为phoneInput,则soure属性应绑定这个对象.
source="{phoneInput}" 
property:表示验证对象的属性(一个对象有很多属性,但你未指定验证哪一项,TextInput有一个text属性,就是我们的输入文本.所以表示验证的数据为text)

可能大家还是喜欢看效果,下面来看一个简单的例子,还是拿帮助文件的例子来讲
PhoneNumberValidator为一个验证电话号码的控件
代码一
<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
 <!-- Define the PhoneNumberValidator. --> 
 <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/> 
 <!-- Define the TextInput control for entering the phone number. --> 
 <mx:TextInput id="phoneInput"/> 
 <mx:TextInput id="zipCodeInput"/> 
</mx:Application>  
下面试一下效果吧
先把鼠标放在第一个文本框上,然后鼠标移出,会发现文本眶颜色变为红色,表明验证未通过.再次将鼠标移到文本眶上如果文本没有输入任何文字的话,会出现默认提示(this field is required),表明此项为必填,如果验证结果与输入不符合的话会出现默认错误提示(your telephone number must contain at least 10 dights)

/Upload/2006-07/2006747111417.swf

如果你不喜欢使用标签的话,你也可以以编程的方式来实现以上效果,当然如果简单验证的话,用标签就够了.以下使用编程实现验证
示例二 
<?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"; 
 } 
 ]]> 
 </mx:Script>  
 <!-- Define the TextInput control for entering the phone number. --> 
 <mx:TextInput id="phoneInput" creationComplete="createValidator();"/> 
 <mx:TextInput id="zipCodeInput"/> 
</mx:Application> 
2.使用按钮触发验证
第一个例子虽然实现了验证,但感觉验证的功能是可有可无的,当我们把鼠标移到文本眶上再移出才出发验证.如果我们预先不把鼠标移到文本眶上,这个验证就算无效了.我们可以利用按钮检查验证是否通过.如果验证未通过则文本眶显红色.
Validator还有两个属性
trigger:表示触发验证事件的对象
triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等) 
了解以上两个属性的话就可以解决第一个例子的问题了.看以下代码
<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
 <!-- Define the PhoneNumberValidator. --> 
 <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text" 
 trigger="{btn}" triggerEvent="click" /> 
 <!-- Define the TextInput control for entering the phone number. --> 
 <mx:TextInput id="phoneInput"/> 
 <mx:Button label="Button" id="btn"/> 
</mx:Application> 
试一下效果吧,现在你可以不用先把鼠标移动到文本眶上,直接点击按钮,你将发现文本眶显红色.现在你该明白了吧.

/Upload/2006-07/200674721925.swf

3.修改默认提示错误
验证控件在默认情况下已经给出默认的提示错误,我们看E文肯定不爽,可否修改默认提示?当然可以.
Validator基类有一个requiredFieldError属性 表示必填项没填入数据的时的提示错误信息
然后呢每个验证控件都有自己不同的验证机制,属性也不相同,如PhoneNumberValidator有一个属性
wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息
invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息
了解上面两个属性后,再看看效果 
<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
 <!-- Define the PhoneNumberValidator. --> 
 <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text" 
 trigger="{btn}" triggerEvent="click" 
 requiredFieldError="此项为必填" invalidCharError="请输入阿拉伯数字" wrongLengthError="请至少输入请输入10个阿拉伯数字" /> 
 <!-- Define the TextInput control for entering the phone number. --> 
 <mx:TextInput id="phoneInput"/> 
 <mx:Button label="Button" id="btn"/> 
</mx:Application>  

/Upload/2006-07/2006747243395.swf

好了,最简单的讲完了.介绍了三个功能,其实也就学习几个属性而已,不知道大家感不感兴趣,当然还有其他验证,并没这么简单,有时间再跟大家分享.上面讲的三点你学会了吗? 
  .
 
 
Google
我们的服务免费课件 课件定做 毕业课件设计 免费课件(QQ:375824467/电话:13996037041)  教程录入:admin    责任编辑:admin 
------------

发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口

  • 上一篇教程:
  • 下一篇教程:
  •    最新热点    最新推荐    相关教程
    AS3.0教程(4):爽快使用XML
    检测摄像头和麦克风状态并自…
    使用Flex 2 Sdk编译as3.0…
    探索Flash Professional Act…
    使用as3中EventDispatcher类
    as3中的访问权限
    初探as3的事件对象
    AS3.0教程(3):Document Clas…
    AS 3.0教程(2):AS3.0的类及…
    flash与后台数据交换方法整理…
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)