Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Validator: Exemple de CreditCardValidator en MXML et ActionScript

Le composant Flex CreditCardValidator vous permet de valider des nombres dont le format suit les règles basiques des numéros de carte de crédit: longueur correcte, préfixe correct, et s'il passe le test de l'algorithme Luhn mod10 pour le type de carte spécifié. Même si ce Validator ne peut pas vérifier si le nombre est un numéro de carte de crédit valide, il peut réaliser les tests simples permettant de savoir si l'utilisateur n'a pas fait d'erreur dans sa saisie.

Le CreditCardValidator peut tester les cartes de type:

• American Express
• Diners Club
• Discover
• MasterCard
• Visa

Ce Validator requiert deux sources d'entrée:

• Une pour le type de carte (un RadioButton ou une ComboBox par exemple)
• Une pour la valeur du numéro de carte (un champ texte TextInput)

Flex Validator: Personnaliser les tooltip d’erreur du CreditCardValidator

L' exemple suivant montre comment utiliser ce composant Flex CreditCardValidator en MXML.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

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

    <mx:CreditCardValidator id="ccV"
        cardTypeSource="{cardTypeCombo}" cardTypeProperty="value"
        cardNumberSource="{cardNumberInput}" cardNumberProperty="text"
        trigger="{myButton}" triggerEvent="click"
        cardTypeListener="{cardTypeCombo}"
        cardNumberListener="{cardNumberInput}"
        valid="Alert.show('Le champ est valide');"/>

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

        <mx:Form id="creditCardForm">
            <mx:FormItem label="Type de carte">
                <mx:ComboBox id="cardTypeCombo">
                    <mx:dataProvider>
                    	<mx:ArrayCollection>
                        <mx:String>American Express</mx:String>
                        <mx:String>Diners Club</mx:String>
                        <mx:String>Discover</mx:String>
                        <mx:String>MasterCard</mx:String>
                        <mx:String>Visa</mx:String>
                    	</mx:ArrayCollection>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Numéro de carte de crédit">
                <mx:TextInput id="cardNumberInput"/>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="myButton" label="Vérifier le numéro de carte"/>
            </mx:FormItem>
        </mx:Form>     

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

Flex Source Code Download: Télécharger le code source complet de l'application

Pour créer ce composant avec le même comportement en ActionScript, il suffit d'utiliser ce code AS3:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.validators.CreditCardValidator;
			public function initApp():void{
				var creditCardValidator:CreditCardValidator = new CreditCardValidator();
				creditCardValidator.cardTypeSource = cardTypeCombo;
				creditCardValidator.cardTypeProperty = "value";
				creditCardValidator.cardNumberSource = cardNumberInput;
				creditCardValidator.cardNumberProperty = "text";
				creditCardValidator.cardTypeListener = cardTypeCombo;
				creditCardValidator.cardNumberListener = cardNumberInput;
				creditCardValidator.trigger = myButton;
				creditCardValidator.triggerEvent = "click";
			}
		]]>
	</mx:Script>

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

        <mx:Form id="creditCardForm">
            <mx:FormItem label="Type de carte">
                <mx:ComboBox id="cardTypeCombo">
                    <mx:dataProvider>
                    	<mx:ArrayCollection>
                        <mx:String>American Express</mx:String>
                        <mx:String>Diners Club</mx:String>
                        <mx:String>Discover</mx:String>
                        <mx:String>MasterCard</mx:String>
                        <mx:String>Visa</mx:String>
                    	</mx:ArrayCollection>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Numéro de carte de crédit">
                <mx:TextInput id="cardNumberInput"/>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="myButton" label="Vérifier le numéro de carte"/>
            </mx:FormItem>
        </mx:Form>     

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