常用Flex驗證方式剖析
Flex有很多值得學習的地方,這里向大家描述一下常用Flex驗證方式,默認的情況下,F(xiàn)lex當我們切換組件焦點的時候檢測任意動作觸發(fā)驗證有兩種寫法。一種是在驗證組件中指明觸發(fā)器和觸發(fā)動作。另一種是執(zhí)行事件處理函數。
常用Flex驗證方式
1.Flex驗證必填項
代碼如下:
- <mx:Validatoridmx:Validatorid="nameV"source="{nameTI}"
- property="text"requiredFieldError="必須輸入用戶名!"/>
- <mx:FormItemlabelmx:FormItemlabel="用戶名:">
- <mx:TextInputidmx:TextInputid="nameTI"/>
- </mx:FormItem>
- <mx:Buttonidmx:Buttonid="btn"label="提交"/>
Validator組件的功能是檢測必填項。我們把要檢測的組件的名字寫在source屬性中,把要檢測的組件的屬性寫在property屬性中,然后自定義requiredFieldError屬性的值即可。當然requiredFieldError屬性的值也可以不定義,那么就會使用默認的提示文字。
上面的錯誤提示的文字有些看不清,只需要加上這樣一句就OK了:
- <mx:Style>
- .errorTip
- {
- fontSize:12;
- }
- </mx:Style>
2.控制檢測時機
默認的情況下,F(xiàn)lex當我們切換組件焦點的時候檢測任意動作觸發(fā)驗證有兩種Flex驗證方式。一種是在驗證組件中指明觸發(fā)器和觸發(fā)動作。另一種是執(zhí)行事件處理函數。
在驗證組件中指明觸發(fā)器和觸發(fā)動作的語法如下所示。
- <mx:驗證組件類型
- source="{輸入源id}"
- property="輸入源的屬性"
- trigger="{觸發(fā)器}"
- triggerEvent="觸發(fā)事件">
下面這個例子為按Tab鍵切換焦點已經不能觸發(fā)檢測動作了,只有單擊“提交”按鈕才會觸發(fā)檢測。
- <?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>
在默認情況下,Validator會在Flex發(fā)出valueCommit事件的時候進行檢測,因此當焦點改變的時候,會自動進行檢測。而上面的源碼中,則手動指定了進行檢測的事件是btn按鈕的click事件。
任意動作的觸發(fā)也可采用代碼觸發(fā)Flex驗證方式。
其語法如下所示。
<組件事件="驗證組件.validate();"/>
驗證組件都包含一個validate方法,用以代碼執(zhí)行驗證。
比如:
- <mx:Buttonidmx:Buttonid="btn"label="提交"click="nameV.validate();"/>
【編輯推薦】