FLEX常用验证控件

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