Flex2開發項目中經常需要驗證使用者輸入,Flex2自身為我們提供豐富的組件。
下面的例子我們實現了如下一些特性:
1)資料集中驗證
2)定位游標到第一個驗證失敗的位置
3)錯誤提示中中文顯示的CSS
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" creationComplete="initValidatorArray();" width="402" height="152">
<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.validators.*;
private var myValidators:Array;
private function initValidatorArray():void {
myValidators=[zipV, pnV];
}
//按鈕事件,檢測通過執行操作
private function btnValidate_Click(event:Event):void{
var validatorResults:Array = mx.validators.Validator.validateAll(myValidators);
//長度為0表示所有驗證通過
if(validatorResults.length == 0){
mx.controls.Alert.show("Validate OK!");
}else{
//將游標定位到第一個錯誤
var v:ValidationResultEvent = validatorResults[0] as ValidationResultEvent;
(v.target.source as UIComponent).setFocus();
}
}
]]>
</mx:Script>
<!--如果你要在驗證錯誤提示中顯示中文,使用這個改變字型大小!-->
<mx:Style>
.errorTip {fontFamily:"simsun"; fontSize:"12"}
</mx:Style>
<mx:ZipCodeValidator id="zipV" source="{zipCodeInput}" property="text" requiredFieldError="郵編必須填寫"/>
<mx:PhoneNumberValidator id="pnV" source ="{phoneNumberInput}" property="text" />
<mx:Form x="24" y="24">
<mx:FormItem label="zip Code:" required="true">
<mx:TextInput id="zipCodeInput"/>
</mx:FormItem>
<mx:FormItem label="phone Number:" required="true">
<mx:TextInput id="phoneNumberInput"/>
</mx:FormItem>
</mx:Form>
<mx:Button label="Validate" click="btnValidate_Click(event)"/>
</mx:Application>
樣本: