Posted on 2006-04-14 11:14
云自無心水自閑 閱讀(1828)
評論(1) 編輯 收藏 所屬分類:
Flex 、
Flex2
在Flex2.0中, Validator組件的使用方式和1.5中相比, 進行了一些改變, 不再需要定義Model, 可以在Validator屬性中直接引用Form成員了.
????<mx:Form?id="loginForm">
????????<mx:Text?text="?{AtsModelLocator.getInstance().loginFailMessage?}"?width="80%"?color="red"/>
????
????????<mx:FormItem?label="Username:?"?required="true">
????????????<mx:TextInput?id="username"?/>
????????</mx:FormItem>
????????<mx:FormItem?label="Password:?"?required="true">
????????????<mx:TextInput?id="password"?/>
????????</mx:FormItem>
????</mx:Form>
????<mx:ControlBar>
????????<mx:Button?id="loginSubmit"?label="Login"?mouseUp="loginUser()"/>
????</mx:ControlBar>
????
????<mx:StringValidator?id="userNameValidator"?source="{username}"?property="text"
????????tooShortError="This?string?is?shorter?than?the?minimum?allowed?length?of?3.?"?
????????tooLongError="This?string?is?longer?than?the?maximum?allowed?length?of?20."?
????????minLength="4"?maxLength="20"/>
????<mx:StringValidator?id="userPassValidator"?source="{password}"?property="text"
????????tooShortError="This?string?is?shorter?than?the?minimum?allowed?length?of?6.?"?
????????tooLongError="This?string?is?longer?than?the?maximum?allowed?length?of?10."?
????????minLength="4"?maxLength="20"/>
這樣就定義好了兩個Validator, 可以對用戶名和用戶密碼進行校驗.
但是怎么使用這兩個Validator呢?
我是這樣用的:
????<mx:Script>
????<![CDATA[
????????import?mx.controls.Alert;
????????import?mx.events.ValidationResultEvent;
????????import?mx.validators.ValidationResult;??
????????????
???????import?com.ats.vo.LoginVO;
???????import?com.ats.control.LoginEvent;
???????
???????import?mx.validators;
???????
???????public?function?loginUser()?:?void
???????{
??????????if?(?!?modelCheckValid?)?{
??????????????modelCheckValid?=?true;
??????????????return;
??????????}
???????????
??????????var?loginVO?:?LoginVO?=?new?LoginVO();
??????????loginVO.username?=?username.text;
??????????loginVO.password?=?password.text;
????????????
????????????var?event?:?LoginEvent?=?new?LoginEvent(?loginVO?);
????????????dispatchEvent(?event?);
???????}
???????
???????private?var?modelCheckValid?:?Boolean?=?true;
????]]>
????</mx:Script>
????<mx:Form?id="loginForm">
????????<mx:Text?text="?{AtsModelLocator.getInstance().loginFailMessage?}"?width="80%"?color="red"/>
????
????????<mx:FormItem?label="Username:?"?required="true">
????????????<mx:TextInput?id="username"?/>
????????</mx:FormItem>
????????<mx:FormItem?label="Password:?"?required="true">
????????????<mx:TextInput?id="password"?/>
????????</mx:FormItem>
????</mx:Form>
????<mx:ControlBar>
????????<mx:Button?id="loginSubmit"?label="Login"?mouseUp="loginUser()"/>
????</mx:ControlBar>
????
????<mx:StringValidator?id="userNameValidator"?source="{username}"?property="text"
????????tooShortError="This?string?is?shorter?than?the?minimum?allowed?length?of?3.?"?
????????tooLongError="This?string?is?longer?than?the?maximum?allowed?length?of?20."?
????????minLength="4"?maxLength="20"
????????invalid="modelCheckValid=false"
????????trigger="{loginSubmit}"
????????triggerEvent="mouseDown"/>
????<mx:StringValidator?id="userPassValidator"?source="{password}"?property="text"
????????tooShortError="This?string?is?shorter?than?the?minimum?allowed?length?of?6.?"?
????????tooLongError="This?string?is?longer?than?the?maximum?allowed?length?of?10."?
????????minLength="4"?maxLength="20"
????????invalid="modelCheckValid=false"
????????trigger="{loginSubmit}"
????????triggerEvent="mouseDown"/>
為什么這么復雜地在Validator中定義trigger, triggerEvent呢?
原因是這樣的: 如果不是在Validator的invalid事件中去設置modelCheckValid這個標志量.
就需要在loginUser()函數中對所有Validator進行判斷, 代碼會顯得比較臃腫復雜.
而且如果需要考慮是否需要一次性顯示出所有校驗失敗的錯誤.
代碼示例:
????<mx:Script>
????<![CDATA[
????????import?mx.controls.Alert;
????????import?mx.events.ValidationResultEvent;
????????import?mx.validators.ValidationResult;??
????????????
???????import?com.ats.vo.LoginVO;
???????import?com.ats.control.LoginEvent;
???????
???????import?mx.validators;
???????
???????public?function?loginUser()?:?void
???????{
???????
??????????var?vrEvent?:?ValidateResultEvent;
??????????
??????????var?checkFailed?:?Boolean?=?false;
??????????
??????????vrEvent?=?userNameValidator.validate();
??????????if?(?vrEvent.results?!=?null?&&?vrEvent.results.length?>?0?)?{
??????????????//?驗證失敗
??????????????checkFailed?=?true;
??????????}
??????????
??????????vrEvent?=?userPassValidator.validate();
??????????if?(?vrEvent.results?!=?null?&&?vrEvent.results.length?>?0?)?{
??????????????//?驗證失敗
??????????????checkFailed?=?true;
??????????}
??????????
??????????if?(?checkFailed?)?return;
???????????
??????????var?loginVO?:?LoginVO?=?new?LoginVO();
??????????loginVO.username?=?username.text;
??????????loginVO.password?=?password.text;
????????????
????????????var?event?:?LoginEvent?=?new?LoginEvent(?loginVO?);
????????????dispatchEvent(?event?);
???????}
???????
????]]>
????</mx:Script>
????<mx:Form?id="loginForm">
????????<mx:Text?text="?{AtsModelLocator.getInstance().loginFailMessage?}"?width="80%"?color="red"/>
????
????????<mx:FormItem?label="Username:?"?required="true">
????????????<mx:TextInput?id="username"?/>
????????</mx:FormItem>
????????<mx:FormItem?label="Password:?"?required="true">
????????????<mx:TextInput?id="password"?/>
????????</mx:FormItem>
????</mx:Form>
????<mx:ControlBar>
????????<mx:Button?id="loginSubmit"?label="Login"?mouseUp="loginUser()"/>
????</mx:ControlBar>
????
????<mx:StringValidator?id="userNameValidator"?source="{username}"?property="text"
????????tooShortError="This?string?is?shorter?than?the?minimum?allowed?length?of?3.?"?
????????tooLongError="This?string?is?longer?than?the?maximum?allowed?length?of?20."?
????????minLength="4"?maxLength="20"/>
????<mx:StringValidator?id="userPassValidator"?source="{password}"?property="text"
????????tooShortError="This?string?is?shorter?than?the?minimum?allowed?length?of?6.?"?
????????tooLongError="This?string?is?longer?than?the?maximum?allowed?length?of?10."?
????????minLength="4"?maxLength="20"/>
這種方法也是可行的.
至于具體使用哪一個, 憑自己的喜好了.