在Flex中用Validator檢測數字、字符串、Email、電話號碼等
先看效果。下面的範例演示了StringValidator、NumberValidator和EmailValidator的用法。由於這三個類都繼承自Validator,因此都擁有requiredFieldError屬性,用於自定義沒有值的時候的錯誤信息。但是這三個類擁有更多的錯誤信息。要檢測的值越複雜,需要定義的錯誤信息就越多,例如EmailValidator,本例中共定義了9個錯誤信息。
如果不定義錯誤信息,Flex會顯示默認的英文錯誤信息,這顯然也不是我們所需要的。如果想偷懶的話,可以定義幾個最可能出現的錯誤,例如本例的NumberValidator,就沒有定義所有的錯誤信息。
順便還要說一句的是,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="提交" />