Flex中验证表单项目合法性并给予友好提示

[url]http://zhaoyl.iteye.com/blog/219377[/url]
[img]
http://dl.iteye.com/upload/attachment/151355/042d4cb0-7e52-3da6-805e-a883757d0c7b.jpg
[/img]

<?xml version="1.0" encoding="utf-8"?> 
<!--
date:2008.7.24
version:v1.0
author:zhaoyl
des:验证表单并给予友好化提示

-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    verticalAlign="middle" 
    backgroundColor="white" 
    pageTitle="验证form表单"
    creationComplete="init()"> 

    <mx:Script> 
        <![CDATA[ 
            import mx.validators.Validator; 
            import mx.events.ValidationResultEvent; 
            import mx.validators.ZipCodeValidatorDomainType; 
            import mx.controls.Alert; 

            [Bindable] 
            private var validatorArr:Array; 

            private function init():void 
            { 
                validatorArr = new Array(); 
                validatorArr.push(name_stringValidator); 
                validatorArr.push(address1_stringValidator); 
                validatorArr.push(city_stringValidator); 
                validatorArr.push(state_numberValidator); 
                validatorArr.push(zipCode_zipCodeValidator); 
                validatorArr.push(zipCode_stringValidator); 
            } 

            private function validateForm(evt:MouseEvent):void { 
                var validatorErrorArray:Array = Validator.validateAll(validatorArr);; 
                var isValidForm:Boolean = validatorErrorArray.length == 0; 
                if (isValidForm) { 
                    Alert.show("员工信息填写不完整!"); 
                } else { 
                    var err:ValidationResultEvent; 
                    var errorMessageArray:Array = []; 
                    for each (err in validatorErrorArray) { 
                        var errField:String = FormItem(err.currentTarget.source.parent).label 
                        errorMessageArray.push(errField + ": " + err.message); 
                    } 
                    Alert.show(errorMessageArray.join("\n\n"), "请按照以下错误提示信息重新填写", Alert.OK); 
                } 
            } 

            private function resetForm(evt:MouseEvent):void 
            { 
                e_name.text =""; 
                address1.text = ""; 
                address2.text = ""; 
                city.text = ""; 
                state.selectedIndex = -1; 
                zipCode.text = ""; 
            } 
        ]]> 
    </mx:Script> 

    <mx:XMLList id="statesXMLList"> 
        <state label="生产中心" data="CA" /> 
        <state label="运营中心" data="OR" /> 
    </mx:XMLList> 

    <mx:StringValidator id="name_stringValidator" 
        source="{e_name}" 
        requiredFieldError="姓名不能为空"
        property="text" 
        minLength="2" /> 

    <mx:StringValidator id="address1_stringValidator" 
        source="{address1}" 
        requiredFieldError="地址不能为空"
        property="text" 
        minLength="2" /> 

    <mx:StringValidator id="city_stringValidator" 
        source="{city}" 
        requiredFieldError="城市不能为空"        
        property="text" 
        minLength="2" /> 

    <mx:NumberValidator id="state_numberValidator" 
        source="{state}" 
        lowerThanMinError="请选择员工所在部门" 
        requiredFieldError="请选择部门"        
        property="selectedIndex" 
        minValue="0" /> 

    <mx:ZipCodeValidator id="zipCode_zipCodeValidator" 
        source="{zipCode}" 
        property="text" 
        requiredFieldError="邮政编码不能超过10位" 
        domain="{ZipCodeValidatorDomainType.US_ONLY}"  /> 

    <mx:StringValidator id="zipCode_stringValidator" 
        source="{zipCode}" 
        property="text" 
        tooShortError="邮政编码是0-9的数字" 
        requiredFieldError="邮政编码不能为空"
        minLength="10" maxLength="10" /> 

    <mx:Form> 
        <mx:FormHeading label="员工注册" /> 
        <mx:FormItem required="true" label="姓名"> 
            <mx:TextInput id="e_name" maxChars="96" /> 
        </mx:FormItem> 
        <mx:FormItem required="true" label="地址"> 
            <mx:TextInput id="address1" maxChars="128" /> 
        </mx:FormItem> 
        <mx:FormItem label="区域"> 
            <mx:TextInput id="address2" maxChars="128" /> 
        </mx:FormItem> 
        <mx:FormItem required="true" label="城市"> 
            <mx:TextInput id="city" maxChars="128" /> 
        </mx:FormItem> 
        <mx:FormItem required="true" label="部门"> 
            <mx:ComboBox id="state" prompt="选择部门" selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" /> 
        </mx:FormItem> 
        <mx:FormItem required="true" label="邮政编码"> 
            <mx:TextInput id="zipCode" maxChars="10" restrict="0-9 -" /> 
        </mx:FormItem> 
        <mx:FormItem> 
            <mx:HBox> 
                <mx:Button label="注册" click="validateForm(event)" /> 
                <mx:Button label="重置" click="resetForm(event)" /> 
            </mx:HBox> 
        </mx:FormItem> 
    </mx:Form> 

</mx:Application>