常用Flex验证控件用法指导-msflexgrid控件用法

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

常用Flex验证控件

1.验证必填项

代码如下:

<mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text"requiredFieldError="必须输入用户名！"/> 
<mx:FormItemlabelmx:FormItemlabel="用户名："> 
<mx:TextInputidmx:TextInputid="nameTI"/> 
</mx:FormItem> 
<mx:Buttonidmx:Buttonid="btn"label="提交"/>

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

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

<mx:Style> 
.errorTip  
{  
fontSize:12;  
}  
</mx:Style>

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

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

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

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

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"fontSize="12"width="300"height="150"> 
<mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text" 
requiredFieldError="必须输入姓名！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:Validatoridmx:Validatorid="ageV"source="{ageTI}"property="text" 
requiredFieldError="必须输入年龄！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:FormItemlabelmx:FormItemlabel="姓名："> 
<mx:TextInputidmx:TextInputid="nameTI"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="年龄："> 
<mx:TextInputidmx:TextInputid="ageTI"/> 
</mx:FormItem> 
<mx:Buttonidmx:Buttonid="btn"label="提交"/> 
</mx:Application>

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

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

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

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

例：

//引用ValidationResultEvent类  
importmx.events.ValidationResultEvent;  
privatefunctioncheckHandle():void//验证处理函数  
{  
if(emailV.validate().type==ValidationResultEvent.VALID)  
{  
Alert.show("电子邮件验证成功");//提示"验证成功"  
}  
}  
 
<!--按钮组件，用于验证处理--> 
<mx:Buttonidmx:Buttonid="mySubmit"label="验证"click="checkHandle();"/>

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

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

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"fontSize="12"width="300"height="200"> 
<mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text" 
requiredFieldError="必须输入姓名！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:Validatoridmx:Validatorid="ageV"source="{ageTI}"property="text" 
requiredFieldError="必须输入年龄！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:Validatoridmx:Validatorid="sexV"source="{sexRBG}"property="selectedValue" 
requiredFieldError="必须选择性别！" 
trigger="{btn}"triggerEvent="click"  
listener="{maleRB}"/> 
<mx:FormItemlabelmx:FormItemlabel="姓名："width="150"> 
<mx:TextInputidmx:TextInputid="nameTI"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="年龄："width="150"> 
<mx:TextInputidmx:TextInputid="ageTI"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="性别："direction="horizontal"width="150"> 
<mx:RadioButtonGroupidmx:RadioButtonGroupid="sexRBG"/> 
<mx:RadioButtonidmx:RadioButtonid="maleRB"groupName="sexRBG"label="男"value="1"/> 
<mx:RadioButtonidmx:RadioButtonid="femaleRB"groupName="sexRBG"label="女"value="0"/> 
</mx:FormItem> 
<mx:Buttonidmx:Buttonid="btn"label="提交"/> 
</mx:Application>

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

4.批量Flex验证控件验证

创建一个表单

<mx:Form> 
<mx:FormItemlabelmx:FormItemlabel="当前部门:"> 
<mx:Textidmx:Textid="txtDepartName"width="100"/> 
</mx:FormItem> 
 
<mx:FormItemlabelmx:FormItemlabel="*新建角色名称(至多10个汉字):"> 
<mx:TextInputidmx:TextInputid="roleName"width="100%"/> 
</mx:FormItem> 
 
<mx:FormItemlabelmx:FormItemlabel="*新建角色名称(至多10个英文字母):"> 
<mx:TextInputidmx:TextInputid="roleEnName"width="100%"/> 
</mx:FormItem> 
 
<mx:FormItemlabelmx:FormItemlabel="角色描述(至多50个汉字):"> 
<mx:TextInputidmx:TextInputid="roleDescibe"width="100%"/> 
</mx:FormItem> 
 
<mx:ControlBar> 
<mx:Buttonidmx:Buttonid="btnSubmit"label="提交"click="btnSubmit_click()"/> 
<mx:Buttonidmx:Buttonid="btnClose"label="关闭"click="btnClose_click()"/> 
</mx:ControlBar>

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

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

通过数组，创建组合验证

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

//代码

privatefunctionbtnSubmit_click():void{  
//分别检测验证是否通过，如果没有通过，则通过派发事件，主动显示错误提示  
if(Validator.validateAll(roleEnNameValidators).length!=0)  
roleEnName.dispatchEvent(newMouseEvent(MouseEvent.MOUSE_OVER));  
elseif(Validator.validateAll(roleNameValidators).length!=0)  
roleName.dispatchEvent(newMouseEvent(MouseEvent.MOUSE_OVER));  
else  
{  
varpar:powerModule=this.owneraspowerModule;  
par.roleList.addItem({label:"大三辅导员",data:"3"});  
 
varmodel:RoleModel=newRoleModel();  
model.roleName="大三辅导员";  
model.roleEnName="daisan";  
model.roleID=par.personVo.departID+"."+model.roleEnName;  
 
model.ysxh="010200";  
model.roleDescribe="测试用的";  
AddRoleResult.token=roleService.add(model);  
}  
 
}

【编辑推荐】