Validator 組件

必填項

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="120">
 <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必須輸入用戶名！"/>
 <mx:FormItem label="用戶名：">
 <mx:TextInput id="nameTI"/>
 </mx:FormItem>
 <mx:Button id="btn" label="提交" />
</mx:Application>

<mx:Style>
 .errorTip
 {
 fontSize: 12;
 }
</mx:Style>

單擊“提交”按鈕纔會觸發檢測

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="150">
 <mx:Style>
 <![CDATA[
 .errorTip
 {
 fontSize: 12;
 }
 ]]>
 </mx:Style>
 <mx:Validator id="nameV" source="{nameTI}" property="text"
 requiredFieldError="必須輸入姓名！"
 trigger="{btn}" triggerEvent="click"/>
 <mx:Validator id="ageV" source="{ageTI}" property="text"
 requiredFieldError="必須輸入年齡！"
 trigger="{btn}" triggerEvent="click"/>
 <mx:FormItem label="姓名：">
 <mx:TextInput id="nameTI"/>
 </mx:FormItem>
 <mx:FormItem label="年齡：">
 <mx:TextInput id="ageTI"/>
 </mx:FormItem>
 <mx:Button id="btn" label="提交" />
</mx:Application>

控制錯誤顯示的目標

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200">
 <mx:Style>
 <![CDATA[
 .errorTip
 {
 fontSize: 12;
 }
 ]]>
 </mx:Style>
 <mx:Validator id="nameV" source="{nameTI}" property="text"
 requiredFieldError="必須輸入姓名！"
 trigger="{btn}" triggerEvent="click"/>
 <mx:Validator id="ageV" source="{ageTI}" property="text"
 requiredFieldError="必須輸入年齡！"
 trigger="{btn}" triggerEvent="click"/>
 <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue"
 requiredFieldError="必須選擇性別！"
 trigger="{btn}" triggerEvent="click"
 listener="{maleRB}"/>
 <mx:FormItem label="姓名：" width="150">
 <mx:TextInput id="nameTI"/>
 </mx:FormItem>
 <mx:FormItem label="年齡：" width="150">
 <mx:TextInput id="ageTI"/>
 </mx:FormItem>
 <mx:FormItem label="性別：" direction="horizontal" width="150">
 <mx:RadioButtonGroup id="sexRBG"/>
 <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
 <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
 </mx:FormItem>
 <mx:Button id="btn" label="提交" />
</mx:Application>

NumberValidator可以指定要檢測的數字是整數還是實數，這需要用domain屬性來指定

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200">

 <mx:Style>
 <![CDATA[
 .errorTip
 {
 fontSize: 12;
 }
 ]]>
 </mx:Style>

 <mx:StringValidator id="nameV" source="{nameTI}" property="text"
 minLength="2"
 maxLength="5"
 requiredFieldError="必須輸入姓名！"
 tooShortError="姓名過短！"
 tooLongError="姓名過長！"
 trigger="{btn}" triggerEvent="click"/>

 <mx:NumberValidator id="ageV" source="{ageTI}" property="text"
 domain="int"
 minValue="6"
 maxValue="100"
 lowerThanMinError="年齡過小！"
 exceedsMaxError="年齡過大！"
 integerError="年齡必須是整數！"
 invalidCharError='輸入了非數字字符！'
 requiredFieldError="必須輸入年齡！"
 trigger="{btn}" triggerEvent="click"/>

 <mx:Validator id="sexV" source="{sexRBG}" property="selectedValue"
 requiredFieldError="必須選擇性別！"
 trigger="{btn}" triggerEvent="click"
 listener="{maleRB}"/>

 <mx:EmailValidator id="emailV" source="{emailTI}" property="text"
 requiredFieldError="必須輸入E-mail"
 invalidCharError="E-mail地址中有錯誤字符。"
 invalidDomainError="E-mail地址中的域名不符合規範。"
 invalidIPDomainError="E-mail地址中的IP格式域名不符合規範。"
 invalidPeriodsInDomainError="域名中的“.”錯誤。"
 missingAtSignError="E-mail地址缺少“@”符號。"
 missingPeriodInDomainError="域名中缺少“.”"
 missingUsernameError="E-mail地址缺少用戶名。"
 tooManyAtSignsError="E-mail地址中的“@”符號太多。"
 trigger="{btn}" triggerEvent="click"/>
 
 <mx:FormItem label="姓名：" width="200">
 <mx:TextInput id="nameTI"/>
 </mx:FormItem>

 <mx:FormItem label="年齡：" width="200">
 <mx:TextInput id="ageTI"/>
 </mx:FormItem>

 <mx:FormItem label="性別：" direction="horizontal" width="200">
 <mx:RadioButtonGroup id="sexRBG"/>
 <mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
 <mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
 </mx:FormItem>

 <mx:FormItem label="E-mail：" width="200">
 <mx:TextInput id="emailTI"/>
 </mx:FormItem>

 <mx:Button id="btn" label="提交" />

</mx:Application>
Validators.validateAll()方法同時驗證多個輸入

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="initApp()">

<mx:Style>
 .errorTip
 {
 fontSize: 12;
 }
</mx:Style>
 <mx:Script>
 <![CDATA[
 import mx.events.ValidationResultEvent;
 import mx.controls.Alert;
 import mx.validators.Validator;

 private var myValidators:Array;
 

 private function initApp():void {
 myValidators = [valid1, valid2];
 }

 private function clickHandler():void {
 var errors:Array = Validator.validateAll(myValidators);
 if (errors.length == 0) {
 Alert.show("Looks valid to me.", "SUCCESS");
 }
 }
 ]]>
 </mx:Script>

 <mx:StringValidator id="valid1" source="{ti1}" property="text" minLength="4" maxLength="6" tooShortError="太少了吧" tooLongError="太多了吧" />
 <mx:StringValidator id="valid2" source="{ti2}" property="text" minLength="4" maxLength="6" />
 <mx:Label text="最少4個字符，最多6個字符，謝謝！" fontSize="12"/>

 <mx:TextInput id="ti1" />
 <mx:TextInput id="ti2" />

 <mx:Button label="validate" click="clickHandler()" />

</mx:Application>