flex Form Validator 检验提交

学习 flex from validator 表单检验提交,根据我们做 web 应用程序的经验, 在一个Form 提交前要对数据进行检验,如果表单数据通过验证,那么提交.

下面是示例代码:

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Validator class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            // Import necessary classes.
            import mx.controls.Alert;
            import mx.events.ValidationResultEvent;
           
            // Event listener for the valid and invalid events.
            private function handleValid(eventObj:ValidationResultEvent):void {
                if(eventObj.type==ValidationResultEvent.VALID)   
                    // Enable Submit button.
                    submitButton.enabled = true;
                else
                    submitButton.enabled = false;
            }

            // Submit form is everything is valid.
            private function submitForm():void {
                Alert.show("Form Submitted!");
            }

        ]]>
    </mx:Script>

    <!-- The Validator class defines the required property and the validator events
         used by all validator subclasses. -->
    <mx:Validator id="reqValidUserName" required="true"
        source="{fname}" property="text"
        valid="handleValid(event)" invalid="handleValid(event)"/>

    <mx:EmailValidator source="{email}" property="text"  required="true"
       valid="handleValid(event)" invalid="handleValid(event)"/>
   
    <mx:Panel title="Validator Example" width="100%" height="100%"
            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

        <mx:Form>
            <mx:Text width="100%" color="blue"
                text="Enter a value in the Name field before you can submit. The E-mail field is optional."/>

            <mx:FormItem label="Name: " required="true">
                <mx:TextInput id="fname" width="100%"/>
            </mx:FormItem>

            <mx:FormItem label="E-mail address: " required="true">
                <mx:TextInput id="email" width="100%"/>
            </mx:FormItem>
           
            <mx:FormItem>
                <mx:Button id="submitButton" enabled="false"
                    label="Submit" click="submitForm();"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>
</mx:Application>