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();"/>

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组件上进行显示了。

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);  }   }

看完上述内容，你们掌握Flex验证控件如何使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！