如何使用Flex CreditCardValidator

最新推荐文章于 2024-08-29 07:49:22 发布

最新推荐文章于 2024-08-29 07:49:22 发布 · 176 阅读

文章标签：

#Flex #XML

Flex Validators 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用Flex构建的信用卡验证组件示例。该示例通过定义信用卡数据模型，并结合下拉选择框和文本输入框实现了不同类型的信用卡号码验证。用户可以选择信用卡类型并输入信用卡号，点击按钮后会显示验证结果。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the CreditCardValidator. -->
<!--
	如何使用Flex CreditCardValidator
	MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

	<!-- Define model for the credit card data. -->
    <mx:Model id="creditcard">
        <card>	
            <cardType>{cardTypeCombo.selectedItem.data}</cardType>
            <cardNumber>{cardNumberInput.text}</cardNumber>
        </card>
    </mx:Model>

    <mx:CreditCardValidator id="ccV" 
        cardTypeSource="{creditcard}" cardTypeProperty="cardType"
        cardNumberSource="{creditcard}" cardNumberProperty="cardNumber"
        trigger="{myButton}" triggerEvent="click"
        cardTypeListener="{cardTypeCombo}"
        cardNumberListener="{cardNumberInput}"
        valid="Alert.show('Validation Succeeded!');"/>

    <mx:Panel title="CreditCardValidator Example" width="75%" height="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form id="creditCardForm">
            <mx:FormItem label="Card Type">    
                <mx:ComboBox id="cardTypeCombo">
                    <mx:dataProvider>
                        <mx:Object label="American Express" data="American Express"/>
                        <mx:Object label="Diners Club" data="Diners Club"/>
                        <mx:Object label="Discover" data="Discover"/>
                        <mx:Object label="MasterCard" data="MasterCard"/>
                        <mx:Object label="Visa" data="Visa"/>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Credit Card Number">
                <mx:TextInput id="cardNumberInput"/>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="myButton" label="Check Credit"/>
            </mx:FormItem>
        </mx:Form> 	

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