如何使用Flex Validator

最新推荐文章于 2014-05-06 21:57:52 发布

最新推荐文章于 2014-05-06 21:57:52 发布 · 159 阅读

文章标签：

#Flex #XML

Flex Validators 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的Flex验证器示例，展示了如何通过Validator类实现表单输入字段的必填验证。当名称字段填写后，提交按钮变为可用状态。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Validator class. -->
<!--
	如何使用Flex Validator
	MyShareBook.cn 翻译
-->
<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="reqValid" required="true"
        source="{fname}" property="text" 
        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="false">
                <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>