flex中驗證表單項目合法性並給予友好提示

 

 

 

 

代碼如下 ：

 

 

<?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>