Posted on 2006-04-14 11:14
云自无心水自闲 阅读(1821)
评论(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"/>
这种方法也是可行的.
至于具体使用哪一个, 凭自己的喜好了.