1.验证必填项
代码如下:
<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; } </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:Application>
在默认情况下,Validator 会在Flex发出valueCommit事件的时候进行检测,因此当焦点改变的时候,会自动进行检测。而上面的源码中,则手动指定了进行检测的事件是btn按钮的click事件。
任意动作的触发也可采用代码触发验证方式。
其语法如下所示。
<组件事件="验证组件.validate();"/>
验证组件都包含一个validate方法,用以代码执行验证。
比如:
<mx:Button id="btn" label="提交" click="nameV.validate();" />
3.验证失败处理
验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型,只是这些错误类型的提示是英文的,用户可能需要改变提示。修改错误提示的方法是修改 组件中相应的错误类型属性。例PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。
用户可根据需要修改相应的出错信息。其语法如下所示。
<验证组件错误类型属性="自定义错误提示"/>
例:
//引用ValidationResult Event类 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: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