Flex驗證控件如何使用

Flex驗證控件如何使用，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

1.驗證必填項

代碼如下:

<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屬性的值即可。當(dāng)然requiredFieldError屬性的值也可以不定義，那么就會使用默認(rèn)的提示文字。

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

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

2.控制Flex驗證控件檢測時機(jī)

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

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

下面這個例子為按Tab鍵切換焦點(diǎn)已經(jīng)不能觸發(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>

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

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

3.Flex驗證控件驗證失敗處理

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

例：

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

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

Validator還有一個listen屬性，它用來指定檢測的錯誤信息顯示在哪個組件上。例：

<?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>

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

4.批量Flex驗證控件驗證

創(chuàng)建一個表單

<mx:Form> <mx:FormItemlabelmx:FormItemlabel="當(dāng)前部門:"> <mx:Textidmx:Textid="txtDepartName"width="100"/> </mx:FormItem>  <mx:FormItemlabelmx:FormItemlabel="*新建角色名稱(至多10個漢字):"> <mx:TextInputidmx:TextInputid="roleName"width="100%"/> </mx:FormItem>  <mx:FormItemlabelmx:FormItemlabel="*新建角色名稱(至多10個英文字母):"> <mx:TextInputidmx:TextInputid="roleEnName"width="100%"/> </mx:FormItem>  <mx:FormItemlabelmx:FormItemlabel="角色描述(至多50個漢字):"> <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驗證控件，放在數(shù)組里

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

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

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

//代碼

privatefunctionbtnSubmit_click():void{  //分別檢測驗證是否通過，如果沒有通過，則通過派發(fā)事件，主動顯示錯誤提示  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="測試用的";  AddRoleResult.token=roleService.add(model);  }   }

看完上述內(nèi)容，你們掌握Flex驗證控件如何使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！