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

关键字: 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>