[转](整理)flex常用验证控件

http://hi.baidu.com/wosinmaiken/blog/item/81c3418bb9ab8fc1fc1f1065.html http://www.360doc.com/content/10/1227/14/803246_81728681.shtml 我的360图书馆 1.验证必填项，代码如下: <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名！"/>?? <mx:FormItem label="用户名：">?? ??? <mx:TextInput id="nameTI"/> </mx:FormItem>?? <mx:Button id="btn" label="提交" /> <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名！"/> <mx:FormItem label="用户名："> ??? <mx:TextInput id="nameTI"/> </mx:FormItem> <mx:Button id="btn" label="提交" />? Validator组件的功能是检测必填项。 我们把要检测的组件的名字写在source属性中，把要检测的组件的属性写在property属性中，然后自定义 requiredFieldError属性的值即可。 当然requiredFieldError属性的值也可以不定义，那么就会使用默认的提示文字。 上面的错误提示的文字有些看不清，只需要加上这样一句就OK了： <mx:Style>?? ??? .errorTip{?? ??????? fontSize: 12;?? 5. }?? </mx:Style>? <mx:Style> ??? .errorTip{ ??????? fontSize: 12; ??? } </mx:Style> 2.控制检测时机 ??? 默认的情况下，Flex当我们切换组件焦点的时候检测 ??? 任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。 ??? 在验证组件中指明触发器和触发动作的语法如下所示。 <mx:验证组件类型? source="{输入源id}" property="输入源的属性" trigger="{触发器}" triggerEvent="触发事件"> 下面这个例子为按Tab键切换焦点已经不能触发检测动作了，只有单击“提交”按钮才会触发检测。 <?xml version="1.0" encoding="utf-8"?>?? <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="150"> ??? <mx:Validator id="nameV " source="{nameTI}" property="text" requiredFieldError="必须输入姓名！" trigger="{btn}" triggerEvent="click" /> ??? <mx:Validator id="ageV" source="{ageTI}" property="text" requiredFieldError="必须输入年龄！" trigger="{btn}" triggerEvent="click"/> ??? <mx:FormItem label="姓名："> ??????? <mx:TextInput id="nameTI"/> ??? </mx:FormItem>?? ??? <mx:FormItem label="年龄："> ??????? <mx:TextInput id="ageTI"/></mx:FormItem>?? ??????? <mx:Button id="btn" label="提交" /> ??? </mx:FormItem> </mx:Application> 在默认情况下，Validator 会在Flex发出valueCommit事件的时候进行检测，因此当焦点改变的时候，会自动进行检测。 而上面的源码中，则手动指定了进行检测的事件是btn按钮的click事件。 任意动作的触发也可采用代码触发验证方式。 <组件事件="验证组件.validate();"/> ??? 验证组件都包含一个validate方法，用以代码执行验证。 比如： ??? <mx:Button id="btn" label="提交" click="nameV.validate();" /> 3.验证失败处理 ??? 验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型，只是这些错误类型的提示是英文的，用户可能需要改变提示。修改错误提示的方法是修改组件中相应的错误类型属性。例PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。 ??? 用户可根据需要修改相应的出错信息。其语法如下所示。 ?????????????? <验证组件错误类型属性="自定义错误提示"/> import mx.events.ValidationResultEvent; private function checkHandle():void{???? //验证处理函数 ??? if(emailV.validate().type==ValidationResultEvent.VALID){ ??????? Alert.show("电子邮件验证成功"); //提示"验证成功" ??? } } <!--按钮组件，用于验证处理--> <mx:Button id="mySubmit" label="验证" click="checkHandle();"/>???? 注： ??? If(验证组件id.validate().type==ValidationResultEvent.VALID) ??? ValidationResultEvent类包含于“mx.events.*”中，是验证结果事件类。其中，INVALID值表示验证失败，VALID值表示验证成功。 Validator还有一个listen属性 ，它用来指定检测的错误信息显示在哪个组件上。例： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200"> ??? <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入姓名！" trigger="{btn}" triggerEvent="click"/> ??? <mx:Validator id="ageV" source="{ageTI}" property="text" requiredFieldError="必须输入年龄！"trigger="{btn}" triggerEvent="click"/> ??? <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue" requiredFieldError="必须选择性别！" trigger="{btn}" triggerEvent="click" listener="{maleRB}" /> ??? <mx:FormItem label="姓名：" width="150"> ??????? <mx:TextInput id="nameTI"/> ??? </mx:FormItem> ??? <mx:FormItem label="年龄：" width="150"> ??????? <mx:TextInput id="ageTI"/> ??? </mx:FormItem> ??? <mx:FormItem label="性别：" direction="horizontal" width="150"> ??????? <mx:RadioButtonGroup id="sexRBG"/> ??????? <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/> ??????? <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/> ??? </mx:FormItem> ??? <mx:Button id="btn" label="提交" /> </mx:Application> 对于性别的选择，由于检测两个RadioButton比较麻烦，采用了检测RadioButtonGroup的 selectedValue属性的方法，如果这个属性为空，就说明两个RadioButton都没有选择。但RadioButtonGroup并不是一个可视组件，检测的错误信息无法显示出来，所以这里就使用了listen属性将显示信息转到maleRB组件上进行显示了。 4.批量验证 创建一个表单 <mx:Form> ??? <mx:FormItem label="当前部门: "> ??????? <mx:Text id="txtDepartName"? width="100"/> ??? </mx:FormItem> ??? <mx:FormItem label="*新建角色名称(至多10个汉字): "> ??????? <mx:TextInput id="roleName" width="100%"/> ??? </mx:FormItem> ??? <mx:FormItem label="*新建角色名称(至多10个英文字母): "> ??????? <mx:TextInput id="roleEnName" width="100%"/> ??? </mx:FormItem> ??? <mx:FormItem label="角色描述(至多50个汉字): "> ??????? <mx:TextInput id="roleDescibe" width="100%"/> ??? </mx:FormItem> ??? <mx:ControlBar> ??????? <mx:Button id="btnSubmit" label="提交" click="btnSubmit_click()" /> ??????? <mx:Button id="btnClose" label="关闭" click="btnClose_click()" /> ??? </mx:ControlBar> ??? //创建验证控件，放在数组里 ??? <fx:Declarations> ??? <fx:Array id="roleNameValidators"> ??????? <mx:Validator id="roleNameValidator" source="{roleName}" property="text" required="true" requiredFieldError="请输入角色名" /> ??? </fx:Array> ??? //通过数组，创建组合验证 ??? <fx:Array id="roleEnNameValidators"> ??????? <mx:StringValidator source="{roleEnName}" property="text" tooShortError="字符串太短了，请输入最少1个字符. " ??????????????????????????? tooLongError="字符串太长了，请输入最长10个字符. " minLength="1" maxLength="10"/> ??????? <mx:RegExpValidator id="roleEnNameValidator" source="{roleEnName}" property="text" flags="g,i" expression="^[a-z]+$" ??????????????????????????? noMatchError="请输入正确的英文字母" required="false"/> ??? </fx:Array> </fx:Declarations> //代码 private function btnSubmit_click():void{ ??? //分别检测验证是否通过，如果没有通过，则通过派发事件，主动显示错误提示 ??? if(Validator.validateAll(roleEnNameValidators).length != 0){ ??????? roleEnName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER)); ??? }else if(Validator.validateAll(roleNameValidators).length != 0){ ??????? roleName.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER)); ??? }else{ ??????? var par:powerModule = this.owner as powerModule; ??????? par.roleList.addItem({label:"大三辅导员",data:"3"}); ??????? var model:RoleModel = new RoleModel(); ??????? model.roleName = "大三辅导员"; ??????? model.roleEnName = "daisan"; ??????? model.roleID = par.personVo.departID + "." + model.roleEnName; ??????? model.ysxh = "010200"; ??????? model.roleDescribe = "测试用的"; ??????? AddRoleResult.token=roleService.add(model); ??? } } 1.邮件验证 <mx:EmailValidator id="emailV" source="{txtEmail}" property="text" invalidCharError="非法字符" invalidDomainError="非法域" invalidIPDomainError="非法IP域" missingAtSignError="缺少@符" missingPeriodInDomainError="缺少域后缀" missingUsernameError="缺少用户名"/> 2.字符串长度验证 <mx:StringValidator source="{fname}" property="text" tooShortError="字符串太短了，请输入最少4个字符. " tooLongError="字符串太长了，请输入最长20个字符. " minLength="4" maxLength="20" trigger="{myButton}" triggerEvent="click" valid="Alert.show('字符串格式正确!');"/>??? 3.日期验证 <mx:DateValidator source="{txtDate}" property="text" required="true" requiredFieldError="请输入日期" allowedFormatChars="-" inputFormat="YYYY-MM-DD" trigger="{btnSubmit}" triggerEvent="click" valid="mx.controls.Alert.show('验证成功');" invalid="mx.controls.Alert.show('验证失败');" wrongDayError="日输入错误" wrongMonthError="月输入错误" wrongYearError="年输入错误" wrongLengthError="日期长度错误" invalidCharError="日期分隔符错误" formatError="inputFormat 配置错误"/> 4.英文字母验证 <mx:RegExpValidator? id ="regExpValidator" source ="{txtInput}"? property ="text" flags ="g,i"? expression ="^[a-z]+$" valid ="handleResult(event)"? invalid ="handleResult(event)" trigger ="{btnSubmit}"? triggerEvent ="click" noMatchError ="请输入正确的英文字母" required ="false" /> 5.年龄验证 <mx:NumberValidator id="ageV" source="{ageTI}" property="text" domain="int" minValue="6" maxValue="100" lowerThanMinError="年龄过小！" exceedsMaxError="年龄过大！" integerError="年龄必须是整数！" invalidCharError='输入了非数字字符！' requiredFieldError="必须输入年龄！" trigger="{btn}" triggerEvent="click"/> 6.性别验证 <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue" requiredFieldError="必须选择性别！" trigger="{btn}" triggerEvent="click" listener="{maleRB}"/> <mx:FormItem label="性别：" direction="horizontal" width="200"> <mx:RadioButtonGroup id="sexRBG"> <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/> <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/> </mx:RadioButtonGroup> </mx:FormItem> 参考文献： 1. 用Validator组件检测必填项? http://blog.csdn.net/zzr173/archive/2008/09/14/2842409.aspx 2. 批量检查validator? http://blog.csdn.net/supsteven/archive/2009/04/11/4062882.aspx 3. 一个让validator验证时，立即出现tooltip的小方法? http://blog.csdn.net/supsteven/archive/2009/04/15/4076343.aspx 4. flex的数据验证? http://blog.csdn.net/turkeyzhou/archive/2008/11/29/3397172.aspx