常用Flex验证控件用法指导

开发 后端
本文向大家简单介绍一下常用Flex验证控件的使用,主要包括Flex验证控件的必填项,检测时机的控制等内容,希望本文的介绍能让你有所收获。

 本文和大家重点讨论一下常用Flex验证控件的用法,主要包括主要包括Flex验证控件的必填项,检测时机的控制,验证失败时如何处理和批量验证等内容,相信通过本文的学习你对Flex验证控件的用法一定会有深刻的认识。

常用Flex验证控件

1.验证必填项

代码如下: 

  1. <mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text"requiredFieldError="必须输入用户名!"/> 
  2. <mx:FormItemlabelmx:FormItemlabel="用户名:"> 
  3. <mx:TextInputidmx:TextInputid="nameTI"/> 
  4. </mx:FormItem> 
  5. <mx:Buttonidmx:Buttonid="btn"label="提交"/> 

 Validator组件的功能是检测必填项。我们把要检测的组件的名字写在source属性中,把要检测的组件的属性写在property属性中,然后自定义requiredFieldError属性的值即可。当然requiredFieldError属性的值也可以不定义,那么就会使用默认的提示文字。

上面的错误提示的文字有些看不清,只需要加上这样一句就OK了:
 

  1. <mx:Style> 
  2. .errorTip  
  3. {  
  4. fontSize:12;  
  5. }  
  6. </mx:Style> 

 2.控制Flex验证控件检测时机

默认的情况下,Flex当我们切换组件焦点的时候检测
任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。
在验证组件中指明触发器和触发动作的语法如下所示。
 

  1. <mx:验证组件类型  
  2. source="{输入源id}" 
  3. property="输入源的属性" 
  4. trigger="{触发器}" 
  5. triggerEvent="触发事件"> 

 下面这个例子为按Tab键切换焦点已经不能触发检测动作了,只有单击“提交”按钮才会触发检测。
 

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"fontSize="12"width="300"height="150"> 
  3. <mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text" 
  4. requiredFieldError="必须输入姓名!" 
  5. trigger="{btn}"triggerEvent="click"/> 
  6. <mx:Validatoridmx:Validatorid="ageV"source="{ageTI}"property="text" 
  7. requiredFieldError="必须输入年龄!" 
  8. trigger="{btn}"triggerEvent="click"/> 
  9. <mx:FormItemlabelmx:FormItemlabel="姓名:"> 
  10. <mx:TextInputidmx:TextInputid="nameTI"/> 
  11. </mx:FormItem> 
  12. <mx:FormItemlabelmx:FormItemlabel="年龄:"> 
  13. <mx:TextInputidmx:TextInputid="ageTI"/> 
  14. </mx:FormItem> 
  15. <mx:Buttonidmx:Buttonid="btn"label="提交"/> 
  16. </mx:Application> 

 在默认情况下,Validator会在Flex发出valueCommit事件的时候进行检测,因此当焦点改变的时候,会自动进行检测。而上面的源码中,则手动指定了进行检测的事件是btn按钮的click事件。

任意动作的触发也可采用代码触发验证方式。
其语法如下所示。
<组件事件="验证组件.validate();"/>
验证组件都包含一个validate方法,用以代码执行验证。
比如:
<mx:Buttonid="btn"label="提交"click="nameV.validate();"/>#p#

3.Flex验证控件验证失败处理

验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型,只是这些错误类型的提示是英文的,用户可能需要改变提示。修改错误提示的方法是修改组件中相应的错误类型属性。例PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。
用户可根据需要修改相应的出错信息。其语法如下所示。
<验证组件错误类型属性="自定义错误提示"/>

例: 

  1. //引用ValidationResultEvent类  
  2. importmx.events.ValidationResultEvent;  
  3. privatefunctioncheckHandle():void//验证处理函数  
  4. {  
  5. if(emailV.validate().type==ValidationResultEvent.VALID)  
  6. {  
  7. Alert.show("电子邮件验证成功");//提示"验证成功"  
  8. }  
  9. }  
  10.  
  11. <!--按钮组件,用于验证处理--> 
  12. <mx:Buttonidmx:Buttonid="mySubmit"label="验证"click="checkHandle();"/> 
  13.  

 注:
If(验证组件id.validate().type==ValidationResultEvent.VALID)
ValidationResultEvent类包含于“mx.events.*”中,是验证结果事件类。其中,INVALID值表示验证失败,VALID值表示验证成功。

Validator还有一个listen属性,它用来指定检测的错误信息显示在哪个组件上。例:
 

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"fontSize="12"width="300"height="200"> 
  3. <mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text" 
  4. requiredFieldError="必须输入姓名!" 
  5. trigger="{btn}"triggerEvent="click"/> 
  6. <mx:Validatoridmx:Validatorid="ageV"source="{ageTI}"property="text" 
  7. requiredFieldError="必须输入年龄!" 
  8. trigger="{btn}"triggerEvent="click"/> 
  9. <mx:Validatoridmx:Validatorid="sexV"source="{sexRBG}"property="selectedValue" 
  10. requiredFieldError="必须选择性别!" 
  11. trigger="{btn}"triggerEvent="click"  
  12. listener="{maleRB}"/> 
  13. <mx:FormItemlabelmx:FormItemlabel="姓名:"width="150"> 
  14. <mx:TextInputidmx:TextInputid="nameTI"/> 
  15. </mx:FormItem> 
  16. <mx:FormItemlabelmx:FormItemlabel="年龄:"width="150"> 
  17. <mx:TextInputidmx:TextInputid="ageTI"/> 
  18. </mx:FormItem> 
  19. <mx:FormItemlabelmx:FormItemlabel="性别:"direction="horizontal"width="150"> 
  20. <mx:RadioButtonGroupidmx:RadioButtonGroupid="sexRBG"/> 
  21. <mx:RadioButtonidmx:RadioButtonid="maleRB"groupName="sexRBG"label="男"value="1"/> 
  22. <mx:RadioButtonidmx:RadioButtonid="femaleRB"groupName="sexRBG"label="女"value="0"/> 
  23. </mx:FormItem> 
  24. <mx:Buttonidmx:Buttonid="btn"label="提交"/> 
  25. </mx:Application> 

对于性别的选择,由于检测两个RadioButton比较麻烦,采用了检测RadioButtonGroup的selectedValue属性的方法,如果这个属性为空,就说明两个RadioButton都没有选择。但RadioButtonGroup并不是一个可视组件,检测的错误信息无法显示出来,所以这里就使用了listen属性将显示信息转到maleRB组件上进行显示了。#p#

4.批量Flex验证控件验证

创建一个表单 

  1. <mx:Form> 
  2. <mx:FormItemlabelmx:FormItemlabel="当前部门:"> 
  3. <mx:Textidmx:Textid="txtDepartName"width="100"/> 
  4. </mx:FormItem> 
  5.  
  6. <mx:FormItemlabelmx:FormItemlabel="*新建角色名称(至多10个汉字):"> 
  7. <mx:TextInputidmx:TextInputid="roleName"width="100%"/> 
  8. </mx:FormItem> 
  9.  
  10. <mx:FormItemlabelmx:FormItemlabel="*新建角色名称(至多10个英文字母):"> 
  11. <mx:TextInputidmx:TextInputid="roleEnName"width="100%"/> 
  12. </mx:FormItem> 
  13.  
  14. <mx:FormItemlabelmx:FormItemlabel="角色描述(至多50个汉字):"> 
  15. <mx:TextInputidmx:TextInputid="roleDescibe"width="100%"/> 
  16. </mx:FormItem> 
  17.  
  18. <mx:ControlBar> 
  19. <mx:Buttonidmx:Buttonid="btnSubmit"label="提交"click="btnSubmit_click()"/> 
  20. <mx:Buttonidmx:Buttonid="btnClose"label="关闭"click="btnClose_click()"/> 
  21. </mx:ControlBar> 
  22.  

 创建Flex验证控件,放在数组里
 

  1. <fx:Arrayidfx:Arrayid="roleNameValidators"> 
  2. <mx:Validatoridmx:Validatorid="roleNameValidator" 
  3. source="{roleName}"property="text"  
  4. required="true"requiredFieldError="请输入角色名"/> 
  5. </fx:Array> 

通过数组,创建组合验证
 

  1. <fx:Arrayidfx:Arrayid="roleEnNameValidators"> 
  2. <mx:StringValidatorsourcemx:StringValidatorsource="{roleEnName}"property="text"  
  3. tooShortError="字符串太短了,请输入最少1个字符." 
  4. tooLongError="字符串太长了,请输入最长10个字符." 
  5. minLength="1"maxLength="10"/> 
  6. <mx:RegExpValidatoridmx:RegExpValidatorid="roleEnNameValidator" 
  7. source="{roleEnName}"property="text"  
  8. flags="g,i"expression="^[a-z]+$"  
  9. noMatchError="请输入正确的英文字母" 
  10. required="false"/> 
  11. </fx:Array> 
  12. </fx:Declarations> 

 //代码
 

  1. privatefunctionbtnSubmit_click():void{  
  2. //分别检测验证是否通过,如果没有通过,则通过派发事件,主动显示错误提示  
  3. if(Validator.validateAll(roleEnNameValidators).length!=0)  
  4. roleEnName.dispatchEvent(newMouseEvent(MouseEvent.MOUSE_OVER));  
  5. elseif(Validator.validateAll(roleNameValidators).length!=0)  
  6. roleName.dispatchEvent(newMouseEvent(MouseEvent.MOUSE_OVER));  
  7. else  
  8. {  
  9. varpar:powerModule=this.owneraspowerModule;  
  10. par.roleList.addItem({label:"大三辅导员",data:"3"});  
  11.  
  12. varmodel:RoleModel=newRoleModel();  
  13. model.roleName="大三辅导员";  
  14. model.roleEnName="daisan";  
  15. model.roleID=par.personVo.departID+"."+model.roleEnName;  
  16.  
  17. model.ysxh="010200";  
  18. model.roleDescribe="测试用的";  
  19. AddRoleResult.token=roleService.add(model);  
  20. }  
  21.  
  22. }  
  23.  

【编辑推荐】

  1. Flex控件工具大全
  2. 详解Flex控件拖动技术
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

 

 


 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-05 09:05:14

Flex Button

2010-07-27 15:28:02

Flex DataBi

2010-07-28 10:38:29

Flex开源框架

2010-07-29 09:44:17

Flex编程

2010-08-05 10:08:06

Flex效果

2010-08-12 09:25:35

Flex控件

2010-08-13 13:46:04

Flex效果组件

2010-07-27 13:53:15

Flex ComboB

2010-08-06 10:32:49

Flex数据类型

2010-07-28 10:48:48

FlexReport开

2010-08-05 13:44:12

Flex布局

2010-08-12 13:25:46

Flex验证方式

2010-07-30 10:13:38

Flex控件

2010-08-13 11:21:31

Flex渲染器

2010-08-17 10:00:17

DIV样式

2010-08-11 09:11:19

FlexBuilder

2010-08-10 14:34:37

QTPFlex

2010-08-12 13:59:37

FlexList控件

2010-07-27 10:19:28

Flex

2010-08-10 14:25:42

SilkTestFlex
点赞
收藏

51CTO技术栈公众号