常用Flex驗(yàn)證方式剖析
Flex有很多值得學(xué)習(xí)的地方,這里向大家描述一下常用Flex驗(yàn)證方式,默認(rèn)的情況下,F(xiàn)lex當(dāng)我們切換組件焦點(diǎn)的時(shí)候檢測(cè)任意動(dòng)作觸發(fā)驗(yàn)證有兩種寫(xiě)法。一種是在驗(yàn)證組件中指明觸發(fā)器和觸發(fā)動(dòng)作。另一種是執(zhí)行事件處理函數(shù)。
常用Flex驗(yàn)證方式
1.Flex驗(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è)的組件的名字寫(xiě)在source屬性中,把要檢測(cè)的組件的屬性寫(xiě)在property屬性中,然后自定義requiredFieldError屬性的值即可。當(dāng)然requiredFieldError屬性的值也可以不定義,那么就會(huì)使用默認(rèn)的提示文字。
上面的錯(cuò)誤提示的文字有些看不清,只需要加上這樣一句就OK了:
- <mx:Style>
- .errorTip
- {
- fontSize:12;
- }
- </mx:Style>
2.控制檢測(cè)時(shí)機(jī)
默認(rèn)的情況下,F(xiàn)lex當(dāng)我們切換組件焦點(diǎn)的時(shí)候檢測(cè)任意動(dòng)作觸發(fā)驗(yàn)證有兩種Flex驗(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ā)Flex驗(yàn)證方式。
其語(yǔ)法如下所示。
<組件事件="驗(yàn)證組件.validate();"/>
驗(yàn)證組件都包含一個(gè)validate方法,用以代碼執(zhí)行驗(yàn)證。
比如:
- <mx:Buttonidmx:Buttonid="btn"label="提交"click="nameV.validate();"/>
【編輯推薦】
- 解析Flex數(shù)據(jù)綁定的幾種方式
- Flex數(shù)據(jù)綁定技巧
- 學(xué)習(xí)總結(jié) 在Flex中如何嵌入Flex字體
- 揭開(kāi)Flex正則表達(dá)式的神秘面紗
- Flex數(shù)據(jù)綁定及其使用頻繁的幾種情況