Flex2.0中使用Validator

在Flex2.0中, Validator组件的使用方式和1.5中相比, 进行了一些改变, 不再需要定义Model, 可以在Validator属性中直接引用Form成员了.

    <mx:Form id="loginForm">
        <mx:Text text=" {AtsModelLocator.getInstance().loginFailMessage }" width="80%" color="red"/>
    
        <mx:FormItem label="Username: " required="true">
            <mx:TextInput id="username" />
        </mx:FormItem>

        <mx:FormItem label="Password: " required="true">
            <mx:TextInput id="password" />
        </mx:FormItem>
    </mx:Form>


    <mx:ControlBar>
        <mx:Button id="loginSubmit" label="Login" mouseUp="loginUser()"/>
    </mx:ControlBar>
    
    <mx:StringValidator id="userNameValidator" source="{username}" property="text"
        tooShortError="This string is shorter than the minimum allowed length of 3. " 
        tooLongError="This string is longer than the maximum allowed length of 20." 
        minLength="4" maxLength="20"/>

    <mx:StringValidator id="userPassValidator" source="{password}" property="text"
        tooShortError="This string is shorter than the minimum allowed length of 6. " 
        tooLongError="This string is longer than the maximum allowed length of 10." 
        minLength="4" maxLength="20"/>

这样就定义好了两个Validator, 可以对用户名和用户密码进行校验.
但是怎么使用这两个Validator呢?

我是这样用的:

    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.ValidationResultEvent;
        import mx.validators.ValidationResult;  
            
       import com.ats.vo.LoginVO;
       import com.ats.control.LoginEvent;
       
       import mx.validators;
       
       public function loginUser() : void
       {
          if ( ! modelCheckValid ) {
              modelCheckValid = true;
              return;
          }
           
          var loginVO : LoginVO = new LoginVO();
          loginVO.username = username.text;
          loginVO.password = password.text;
            
            var event : LoginEvent = new LoginEvent( loginVO );
            dispatchEvent( event );
       }
       
       private var modelCheckValid : Boolean = true;
    ]]>
    </mx:Script>

    <mx:Form id="loginForm">
        <mx:Text text=" {AtsModelLocator.getInstance().loginFailMessage }" width="80%" color="red"/>
    
        <mx:FormItem label="Username: " required="true">
            <mx:TextInput id="username" />
        </mx:FormItem>

        <mx:FormItem label="Password: " required="true">
            <mx:TextInput id="password" />
        </mx:FormItem>
    </mx:Form>


    <mx:ControlBar>
        <mx:Button id="loginSubmit" label="Login" mouseUp="loginUser()"/>
    </mx:ControlBar>
    
    <mx:StringValidator id="userNameValidator" source="{username}" property="text"
        tooShortError="This string is shorter than the minimum allowed length of 3. " 
        tooLongError="This string is longer than the maximum allowed length of 20." 
        minLength="4" maxLength="20"
        invalid="modelCheckValid=false"
        trigger="{loginSubmit}"
        triggerEvent="mouseDown"/>

    <mx:StringValidator id="userPassValidator" source="{password}" property="text"
        tooShortError="This string is shorter than the minimum allowed length of 6. " 
        tooLongError="This string is longer than the maximum allowed length of 10." 
        minLength="4" maxLength="20"
        invalid="modelCheckValid=false"
        trigger="{loginSubmit}"
        triggerEvent="mouseDown"/>

为什么这么复杂地在Validator中定义trigger, triggerEvent呢?
原因是这样的: 如果不是在Validator的invalid事件中去设置modelCheckValid这个标志量.
就需要在loginUser()函数中对所有Validator进行判断, 代码会显得比较臃肿复杂.
而且如果需要考虑是否需要一次性显示出所有校验失败的错误.
代码示例:

    <mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.ValidationResultEvent;
        import mx.validators.ValidationResult;  
            
       import com.ats.vo.LoginVO;
       import com.ats.control.LoginEvent;
       
       import mx.validators;
       
       public function loginUser() : void
       {
       
          var vrEvent : ValidateResultEvent;
          
          var checkFailed : Boolean = false;
          
          vrEvent = userNameValidator.validate();
          if ( vrEvent.results != null && vrEvent.results.length > 0 ) {
              // 验证失败
              checkFailed = true;
          }
          
          vrEvent = userPassValidator.validate();
          if ( vrEvent.results != null && vrEvent.results.length > 0 ) {
              // 验证失败
              checkFailed = true;
          }
          
          if ( checkFailed ) return;
           
          var loginVO : LoginVO = new LoginVO();
          loginVO.username = username.text;
          loginVO.password = password.text;
            
            var event : LoginEvent = new LoginEvent( loginVO );
            dispatchEvent( event );
       }
       
    ]]>
    </mx:Script>

    <mx:Form id="loginForm">
        <mx:Text text=" {AtsModelLocator.getInstance().loginFailMessage }" width="80%" color="red"/>
    
        <mx:FormItem label="Username: " required="true">
            <mx:TextInput id="username" />
        </mx:FormItem>

        <mx:FormItem label="Password: " required="true">
            <mx:TextInput id="password" />
        </mx:FormItem>
    </mx:Form>


    <mx:ControlBar>
        <mx:Button id="loginSubmit" label="Login" mouseUp="loginUser()"/>
    </mx:ControlBar>
    
    <mx:StringValidator id="userNameValidator" source="{username}" property="text"
        tooShortError="This string is shorter than the minimum allowed length of 3. " 
        tooLongError="This string is longer than the maximum allowed length of 20." 
        minLength="4" maxLength="20"/>

    <mx:StringValidator id="userPassValidator" source="{password}" property="text"
        tooShortError="This string is shorter than the minimum allowed length of 6. " 
        tooLongError="This string is longer than the maximum allowed length of 10." 
        minLength="4" maxLength="20"/>

这种方法也是可行的.
至于具体使用哪一个, 凭自己的喜好了.