本文和大家重點(diǎn)討論一下常用Flex驗(yàn)證控件的用法，主要包括主要包括Flex驗(yàn)證控件的必填項(xiàng)，檢測(cè)時(shí)機(jī)的控制，驗(yàn)證失敗時(shí)如何處理和批量驗(yàn)證等內(nèi)容，相信通過(guò)本文的學(xué)習(xí)你對(duì)Flex驗(yàn)證控件的用法一定會(huì)有深刻的認(rèn)識(shí)。

常用Flex驗(yàn)證控件

1.驗(yàn)證必填項(xiàng)

代碼如下: 

<mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text"requiredFieldError="必須輸入用戶名！"/> 
<mx:FormItemlabelmx:FormItemlabel="用戶名："> 
<mx:TextInputidmx:TextInputid="nameTI"/> 
</mx:FormItem> 
<mx:Buttonidmx:Buttonid="btn"label="提交"/> 

 Validator組件的功能是檢測(cè)必填項(xiàng)。我們把要檢測(cè)的組件的名字寫在source屬性中，把要檢測(cè)的組件的屬性寫在property屬性中，然后自定義requiredFieldError屬性的值即可。當(dāng)然requiredFieldError屬性的值也可以不定義，那么就會(huì)使用默認(rèn)的提示文字。

上面的錯(cuò)誤提示的文字有些看不清，只需要加上這樣一句就OK了：
 

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

 2.控制Flex驗(yàn)證控件檢測(cè)時(shí)機(jī)

默認(rèn)的情況下，F(xiàn)lex當(dāng)我們切換組件焦點(diǎn)的時(shí)候檢測(cè)
任意動(dòng)作觸發(fā)驗(yàn)證有兩種寫法。一種是在驗(yàn)證組件中指明觸發(fā)器和觸發(fā)動(dòng)作。另一種是執(zhí)行事件處理函數(shù)。
在驗(yàn)證組件中指明觸發(fā)器和觸發(fā)動(dòng)作的語(yǔ)法如下所示。
 

<mx:驗(yàn)證組件類型  
source="{輸入源id}" 
property="輸入源的屬性" 
trigger="{觸發(fā)器}" 
triggerEvent="觸發(fā)事件"> 

 下面這個(gè)例子為按Tab鍵切換焦點(diǎn)已經(jīng)不能觸發(fā)檢測(cè)動(dòng)作了，只有單擊“提交”按鈕才會(huì)觸發(fā)檢測(cè)。
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"fontSize="12"width="300"height="150"> 
<mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text" 
requiredFieldError="必須輸入姓名！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:Validatoridmx:Validatorid="ageV"source="{ageTI}"property="text" 
requiredFieldError="必須輸入年齡！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:FormItemlabelmx:FormItemlabel="姓名："> 
<mx:TextInputidmx:TextInputid="nameTI"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="年齡："> 
<mx:TextInputidmx:TextInputid="ageTI"/> 
</mx:FormItem> 
<mx:Buttonidmx:Buttonid="btn"label="提交"/> 
</mx:Application> 

 在默認(rèn)情況下，Validator會(huì)在Flex發(fā)出valueCommit事件的時(shí)候進(jìn)行檢測(cè)，因此當(dāng)焦點(diǎn)改變的時(shí)候，會(huì)自動(dòng)進(jìn)行檢測(cè)。而上面的源碼中，則手動(dòng)指定了進(jìn)行檢測(cè)的事件是btn按鈕的click事件。

任意動(dòng)作的觸發(fā)也可采用代碼觸發(fā)驗(yàn)證方式。
其語(yǔ)法如下所示。
<組件事件="驗(yàn)證組件.validate();"/>
驗(yàn)證組件都包含一個(gè)validate方法，用以代碼執(zhí)行驗(yàn)證。
比如：
<mx:Buttonid="btn"label="提交"click="nameV.validate();"/>#p#

3.Flex驗(yàn)證控件驗(yàn)證失敗處理

驗(yàn)證失敗時(shí)需要做錯(cuò)誤的提示及處理。驗(yàn)證組件中提供了豐富的錯(cuò)誤類型，只是這些錯(cuò)誤類型的提示是英文的，用戶可能需要改變提示。修改錯(cuò)誤提示的方法是修改組件中相應(yīng)的錯(cuò)誤類型屬性。例PhoneNumberValidator組件中的wrongLengthError屬性表示長(zhǎng)度錯(cuò)誤提示。
用戶可根據(jù)需要修改相應(yīng)的出錯(cuò)信息。其語(yǔ)法如下所示。
<驗(yàn)證組件錯(cuò)誤類型屬性="自定義錯(cuò)誤提示"/>

例： 

//引用ValidationResultEvent類  
importmx.events.ValidationResultEvent;  
privatefunctioncheckHandle():void//驗(yàn)證處理函數(shù)  
{  
if(emailV.validate().type==ValidationResultEvent.VALID)  
{  
Alert.show("電子郵件驗(yàn)證成功");//提示"驗(yàn)證成功"  
}  
}  
 
<!--按鈕組件，用于驗(yàn)證處理--> 
<mx:Buttonidmx:Buttonid="mySubmit"label="驗(yàn)證"click="checkHandle();"/> 
 

 注：
If(驗(yàn)證組件id.validate().type==ValidationResultEvent.VALID)
ValidationResultEvent類包含于“mx.events.*”中，是驗(yàn)證結(jié)果事件類。其中，INVALID值表示驗(yàn)證失敗，VALID值表示驗(yàn)證成功。

Validator還有一個(gè)listen屬性，它用來(lái)指定檢測(cè)的錯(cuò)誤信息顯示在哪個(gè)組件上。例：
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"fontSize="12"width="300"height="200"> 
<mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"property="text" 
requiredFieldError="必須輸入姓名！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:Validatoridmx:Validatorid="ageV"source="{ageTI}"property="text" 
requiredFieldError="必須輸入年齡！" 
trigger="{btn}"triggerEvent="click"/> 
<mx:Validatoridmx:Validatorid="sexV"source="{sexRBG}"property="selectedValue" 
requiredFieldError="必須選擇性別！" 
trigger="{btn}"triggerEvent="click"  
listener="{maleRB}"/> 
<mx:FormItemlabelmx:FormItemlabel="姓名："width="150"> 
<mx:TextInputidmx:TextInputid="nameTI"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="年齡："width="150"> 
<mx:TextInputidmx:TextInputid="ageTI"/> 
</mx:FormItem> 
<mx:FormItemlabelmx:FormItemlabel="性別："direction="horizontal"width="150"> 
<mx:RadioButtonGroupidmx:RadioButtonGroupid="sexRBG"/> 
<mx:RadioButtonidmx:RadioButtonid="maleRB"groupName="sexRBG"label="男"value="1"/> 
<mx:RadioButtonidmx:RadioButtonid="femaleRB"groupName="sexRBG"label="女"value="0"/> 
</mx:FormItem> 
<mx:Buttonidmx:Buttonid="btn"label="提交"/> 
</mx:Application> 

對(duì)于性別的選擇，由于檢測(cè)兩個(gè)RadioButton比較麻煩，采用了檢測(cè)RadioButtonGroup的selectedValue屬性的方法，如果這個(gè)屬性為空，就說(shuō)明兩個(gè)RadioButton都沒(méi)有選擇。但RadioButtonGroup并不是一個(gè)可視組件，檢測(cè)的錯(cuò)誤信息無(wú)法顯示出來(lái)，所以這里就使用了listen屬性將顯示信息轉(zhuǎn)到maleRB組件上進(jìn)行顯示了。#p#

4.批量Flex驗(yàn)證控件驗(yàn)證

創(chuàng)建一個(gè)表單 

<mx:Form> 
<mx:FormItemlabelmx:FormItemlabel="當(dāng)前部門:"> 
<mx:Textidmx:Textid="txtDepartName"width="100"/> 
</mx:FormItem> 
 
<mx:FormItemlabelmx:FormItemlabel="*新建角色名稱(至多10個(gè)漢字):"> 
<mx:TextInputidmx:TextInputid="roleName"width="100%"/> 
</mx:FormItem> 
 
<mx:FormItemlabelmx:FormItemlabel="*新建角色名稱(至多10個(gè)英文字母):"> 
<mx:TextInputidmx:TextInputid="roleEnName"width="100%"/> 
</mx:FormItem> 
 
<mx:FormItemlabelmx:FormItemlabel="角色描述(至多50個(gè)漢字):"> 
<mx:TextInputidmx:TextInputid="roleDescibe"width="100%"/> 
</mx:FormItem> 
 
<mx:ControlBar> 
<mx:Buttonidmx:Buttonid="btnSubmit"label="提交"click="btnSubmit_click()"/> 
<mx:Buttonidmx:Buttonid="btnClose"label="關(guān)閉"click="btnClose_click()"/> 
</mx:ControlBar> 
 

 創(chuàng)建Flex驗(yàn)證控件，放在數(shù)組里
 

<fx:Arrayidfx:Arrayid="roleNameValidators"> 
<mx:Validatoridmx:Validatorid="roleNameValidator" 
source="{roleName}"property="text"  
required="true"requiredFieldError="請(qǐng)輸入角色名"/> 
</fx:Array> 

通過(guò)數(shù)組，創(chuàng)建組合驗(yàn)證
 

<fx:Arrayidfx:Arrayid="roleEnNameValidators"> 
<mx:StringValidatorsourcemx:StringValidatorsource="{roleEnName}"property="text"  
tooShortError="字符串太短了，請(qǐng)輸入最少1個(gè)字符." 
tooLongError="字符串太長(zhǎng)了，請(qǐng)輸入最長(zhǎng)10個(gè)字符." 
minLength="1"maxLength="10"/> 
<mx:RegExpValidatoridmx:RegExpValidatorid="roleEnNameValidator" 
source="{roleEnName}"property="text"  
flags="g,i"expression="^[a-z]+$"  
noMatchError="請(qǐng)輸入正確的英文字母" 
required="false"/> 
</fx:Array> 
</fx:Declarations> 

 //代碼
 

privatefunctionbtnSubmit_click():void{  
//分別檢測(cè)驗(yàn)證是否通過(guò)，如果沒(méi)有通過(guò)，則通過(guò)派發(fā)事件，主動(dòng)顯示錯(cuò)誤提示  
if(Validator.validateAll(roleEnNameValidators).length!=0)  
roleEnName.dispatchEvent(newMouseEvent(MouseEvent.MOUSE_OVER));  
elseif(Validator.validateAll(roleNameValidators).length!=0)  
roleName.dispatchEvent(newMouseEvent(MouseEvent.MOUSE_OVER));  
else  
{  
varpar:powerModule=this.owneraspowerModule;  
par.roleList.addItem({label:"大三輔導(dǎo)員",data:"3"});  
 
varmodel:RoleModel=newRoleModel();  
model.roleName="大三輔導(dǎo)員";  
model.roleEnName="daisan";  
model.roleID=par.personVo.departID+"."+model.roleEnName;  
 
model.ysxh="010200";  
model.roleDescribe="測(cè)試用的";  
AddRoleResult.token=roleService.add(model);  
}  
 
}  
 

【編輯推薦】

1. Flex控件工具大全
2. 詳解Flex控件拖動(dòng)技術(shù)
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 解析Flex全屏模式設(shè)置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則