Flex2 資料的驗證方法以及如何改變錯誤提示的CSS

來源:互聯網
上載者:User

Flex2開發項目中經常需要驗證使用者輸入,Flex2自身為我們提供豐富的組件。
下面的例子我們實現了如下一些特性:
1)資料集中驗證
2)定位游標到第一個驗證失敗的位置
3)錯誤提示中中文顯示的CSS

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" creationComplete="initValidatorArray();" width="402" height="152"> 
    <mx:Script>
    <![CDATA[
        import mx.events.ValidationResultEvent;
        import mx.core.UIComponent;
        import mx.controls.Alert;
        import mx.validators.*;
        private var myValidators:Array;
        
        private function initValidatorArray():void {
            myValidators=[zipV, pnV];
        }
        //按鈕事件,檢測通過執行操作
        private function btnValidate_Click(event:Event):void{
            var validatorResults:Array = mx.validators.Validator.validateAll(myValidators);
            //長度為0表示所有驗證通過
            if(validatorResults.length == 0){
                mx.controls.Alert.show("Validate OK!");
            }else{
                //將游標定位到第一個錯誤
                var v:ValidationResultEvent = validatorResults[0] as ValidationResultEvent;
                (v.target.source as UIComponent).setFocus();
            }
        }
    ]]>
    </mx:Script>
    
    <!--如果你要在驗證錯誤提示中顯示中文,使用這個改變字型大小!-->
    <mx:Style>
       .errorTip {fontFamily:"simsun"; fontSize:"12"}        
    </mx:Style>
    
    <mx:ZipCodeValidator id="zipV" source="{zipCodeInput}" property="text" requiredFieldError="郵編必須填寫"/>
    <mx:PhoneNumberValidator id="pnV" source ="{phoneNumberInput}" property="text" />
    <mx:Form x="24" y="24">
        <mx:FormItem label="zip Code:" required="true">
            <mx:TextInput id="zipCodeInput"/>
        </mx:FormItem>
        <mx:FormItem label="phone Number:" required="true">
            <mx:TextInput id="phoneNumberInput"/>
        </mx:FormItem>
    </mx:Form>
    <mx:Button label="Validate" click="btnValidate_Click(event)"/> 
</mx:Application> 

樣本:

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.