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"/>

這種方法也是可行的.
至於具體使用哪一個, 憑自己的喜好了.