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 >