Flex中利用Validator类验证表单项目合法性的例子

By Minidxer | July 21, 2008

接下来的例子演示了Flex中如何利用Validator类验证表单项目合法性。分别使用了StringValidator, NumberValidator, ZipCodeValidator和Validator类。

让我们先来看一下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:Script>
  9.         <![CDATA[
  10.             import mx.validators.Validator;
  11.             import mx.events.ValidationResultEvent;
  12.             import mx.validators.ZipCodeValidatorDomainType;
  13.             import mx.controls.Alert;
  14.  
  15.             [Bindable]
  16.             private var validatorArr:Array;
  17.  
  18.             private function init():void {
  19.                 validatorArr = new Array();
  20.                 validatorArr.push(shippingName_stringValidator);
  21.                 validatorArr.push(shippingAddress1_stringValidator);
  22.                 validatorArr.push(shippingCity_stringValidator);
  23.                 validatorArr.push(shippingState_numberValidator);
  24.                 validatorArr.push(shippingZipCode_zipCodeValidator);
  25.                 validatorArr.push(shippingZipCode_stringValidator);
  26.             }
  27.  
  28.             private function validateForm(evt:MouseEvent):void {
  29.                 var validatorErrorArray:Array = Validator.validateAll(validatorArr);;
  30.                 var isValidForm:Boolean = validatorErrorArray.length == 0;
  31.                 if (isValidForm) {
  32.                     Alert.show("The form is valid!", "Valid form...");
  33.                 } else {
  34.                     var err:ValidationResultEvent;
  35.                     var errorMessageArray:Array = [];
  36.                     for each (err in validatorErrorArray) {
  37.                         var errField:String = FormItem(err.currentTarget.source.parent).label
  38.                         errorMessageArray.push(errField + ": " + err.message);
  39.                     }
  40.                     Alert.show(errorMessageArray.join("\n\n"), "Invalid form...", Alert.OK);
  41.                 }
  42.             }
  43.  
  44.             private function resetForm(evt:MouseEvent):void {
  45.                 shippingName.text = "";
  46.                 shippingAddress1.text = "";
  47.                 shippingAddress2.text = "";
  48.                 shippingCity.text = "";
  49.                 shippingState.selectedIndex = -1;
  50.                 shippingZipCode.text = "";
  51.             }
  52.         ]]>
  53.     </mx:Script>
  54.  
  55.     <mx:XMLList id="statesXMLList">
  56.         <state label="California" data="CA" />
  57.         <state label="Oregon" data="OR" />
  58.     </mx:XMLList>
  59.  
  60.     <mx:StringValidator id="shippingName_stringValidator"
  61.         source="{shippingName}"
  62.         property="text"
  63.         minLength="2" />
  64.  
  65.     <mx:StringValidator id="shippingAddress1_stringValidator"
  66.         source="{shippingAddress1}"
  67.         property="text"
  68.         minLength="2" />
  69.  
  70.     <mx:StringValidator id="shippingCity_stringValidator"
  71.         source="{shippingCity}"
  72.         property="text"
  73.         minLength="2" />
  74.  
  75.     <mx:NumberValidator id="shippingState_numberValidator"
  76.         source="{shippingState}"
  77.         lowerThanMinError="This field is required."
  78.         property="selectedIndex"
  79.         minValue="0" />
  80.  
  81.     <mx:ZipCodeValidator id="shippingZipCode_zipCodeValidator"
  82.         source="{shippingZipCode}"
  83.         property="text"
  84.         requiredFieldError="Please enter a zip code in ZIP+4 format."
  85.         domain="{ZipCodeValidatorDomainType.US_ONLY}"  />
  86.  
  87.     <mx:StringValidator id="shippingZipCode_stringValidator"
  88.         source="{shippingZipCode}"
  89.         property="text"
  90.          tooShortError="Please enter a zip code in ZIP+4 format."
  91.         minLength="10" maxLength="10" />
  92.  
  93.     <mx:Form>
  94.         <mx:FormHeading label="Shipping Information" />
  95.         <mx:FormItem required="true" label="Name">
  96.             <mx:TextInput id="shippingName" maxChars="96" />
  97.         </mx:FormItem>
  98.         <mx:FormItem required="true" label="Address">
  99.             <mx:TextInput id="shippingAddress1" maxChars="128" />
  100.         </mx:FormItem>
  101.         <mx:FormItem label="">
  102.             <mx:TextInput id="shippingAddress2" maxChars="128" />
  103.         </mx:FormItem>
  104.         <mx:FormItem required="true" label="City">
  105.             <mx:TextInput id="shippingCity" maxChars="128" />
  106.         </mx:FormItem>
  107.         <mx:FormItem required="true" label="State">
  108.             <mx:ComboBox id="shippingState" prompt="Please select a State..." selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" />
  109.         </mx:FormItem>
  110.         <mx:FormItem required="true" label="ZIP Code">
  111.             <mx:TextInput id="shippingZipCode" maxChars="10" restrict="0-9 -" />
  112.         </mx:FormItem>
  113.         <mx:FormItem>
  114.             <mx:HBox>
  115.                 <mx:Button label="Submit" click="validateForm(event)" />
  116.                 <mx:Button label="Reset" click="resetForm(event)" />
  117.             </mx:HBox>
  118.         </mx:FormItem>
  119.     </mx:Form>
  120.  
  121. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , ,

Related Post

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads