Flex中如何利用CreditCardValidator和CreditCardValidatorCardType这两个类对信用卡进行认证的例子

By Minidxer | October 26, 2008

接下来的例子演示了Flex中如何利用CreditCardValidator和CreditCardValidatorCardType这两个类，对信用卡进行认证。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Style>
  9.         global {
  10.             modalTransparencyBlur: 0;
  11.             modalTransparency: 0.4;
  12.             modalTransparencyDuration: 250;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             import mx.controls.Alert;
  19.             import mx.events.ValidationResultEvent;
  20.             import mx.styles.StyleManager;
  21.             import mx.validators.CreditCardValidator;
  22.             import mx.validators.CreditCardValidatorCardType;
  23.  
  24.             private var ccVal:CreditCardValidator;
  25.             private var globalStyle:CSSStyleDeclaration;
  26.  
  27.             private function init():void {
  28.                 /* Initialize credit card validator. */
  29.                 ccVal = new CreditCardValidator();
  30.                 ccVal.cardNumberSource = cc;
  31.                 ccVal.cardNumberProperty = "cardNumber";
  32.                 ccVal.cardTypeSource = cc;
  33.                 ccVal.cardTypeProperty = "cardType";
  34.                 ccVal.addEventListener(ValidationResultEvent.VALID, isValid);
  35.                 ccVal.addEventListener(ValidationResultEvent.INVALID, isInvalid);
  36.                 /* Create reference to global style. */
  37.                 globalStyle = StyleManager.getStyleDeclaration("global");
  38.             }
  39.  
  40.             private function isValid(evt:ValidationResultEvent):void {
  41.                 globalStyle.setStyle("modalTransparencyColor", "green");
  42.                 Alert.show("you're valid", evt.type);
  43.             }
  44.  
  45.             private function isInvalid(evt:ValidationResultEvent):void {
  46.                 globalStyle.setStyle("modalTransparencyColor", "red");
  47.                 Alert.show(evt.message, evt.type);
  48.             }
  49.         ]]>
  50.     </mx:Script>
  51.  
  52.     <mx:Model id="cc">
  53.         <card>
  54.             <cardNumber>{cardNumber.text}</cardNumber>
  55.             <cardType>{cardType.selectedItem.data}</cardType>
  56.         </card>
  57.     </mx:Model>
  58.  
  59.     <mx:Array id="ccType">
  60.         <mx:Object label="American Express"
  61.                 data="{CreditCardValidatorCardType.AMERICAN_EXPRESS}" />
  62.         <mx:Object label="Diners Club"
  63.                 data="{CreditCardValidatorCardType.DINERS_CLUB}" />
  64.         <mx:Object label="Discover"
  65.                 data="{CreditCardValidatorCardType.DISCOVER}" />
  66.         <mx:Object label="Master Card"
  67.                 data="{CreditCardValidatorCardType.MASTER_CARD}" />
  68.         <mx:Object label="Visa"
  69.                 data="{CreditCardValidatorCardType.VISA}" />
  70.     </mx:Array>
  71.  
  72.     <mx:Form>
  73.         <mx:FormItem label="Card number:" required="true">
  74.             <mx:TextInput id="cardNumber"
  75.                     restrict="[0-9]" />
  76.         </mx:FormItem>
  77.         <mx:FormItem label="Card type:" required="true">
  78.             <mx:ComboBox id="cardType"
  79.                     dataProvider="{ccType}"
  80.                     prompt="Please select a credit card type."/>
  81.         </mx:FormItem>
  82.         <mx:FormItem>
  83.         <mx:Button label="Validate"
  84.                 click="ccVal.validate();" />
  85.         </mx:FormItem>
  86.     </mx:Form>
  87.  
  88. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Other | No Comments » | Tags: ,

Random Posts

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll