<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark"
viewSourceURL="src/ValidationUsable/index.html"
width="500" height="400"
defaultButton="{submitButton}"
creationComplete="creationCompleteHandler();"
>
<mx:Script>
<![CDATA[
import mx.validators.Validator;
import mx.events.ValidationResultEvent;
import mx.controls.Alert;
import mx.core.IUITextField;
// Event listener for the valid and invalid events.
private function handleValid(evt:ValidationResultEvent):void {
if (evt.type == ValidationResultEvent.VALID) {
submitButton.enabled = true;
} else {
submitButton.enabled = false;
}
}
//表单是否有效
[Bindable]
public var formIsValid:Boolean = false;
//表单是否为空
[Bindable]
public var formIsEmpty:Boolean = true;
//持有该目前集中控制的对象。
private var focussedFormControl:DisplayObject;
/**
* 验证表单方法
* */
private function validateForm(event:Event):void
{
//检查验证传递和返回一个布尔值相应。
//保存引用当前集中表单控件
//这样isValid()辅助方法可以只通知
//当前集中形式控制和不影响
//任何其他的表单控件。
focussedFormControl = event.target as DisplayObject;
// 标记表单有效的开始
formIsValid = true;
// 检查表单是否为空
formIsEmpty = (nameInput.text == "" && password.text==""&& repassword.text=="" && emailInput.text == ""
&& phoneInput.text == "");
//运行每个验证器反过来,使用isValid()
//辅助方法和更新formIsValid的价值
//因此。
validate(nameValidator);
validate(passwordValidator);
validate(repasswordValidator);
validate(phoneValidator);
validate(emailValidator);
}
/**
* 验证方法
* */
private function validate(validator:Validator):Boolean
{
//得到验证对象
var validatorSource:DisplayObject = validator.source as DisplayObject;
//镇压事件如果当前控制被验证的不是
//当前集中控制的形式。这阻止了用户
//从接收视觉验证提示在其他表单控件。
var suppressEvents:Boolean = (validatorSource != focussedFormControl);
//执行验证。返回一个ValidationResultEvent。
//传递null作为第一个参数使验证器
//使用属性中定义的属性的标记
// < mx:Validator >标记。
var event:ValidationResultEvent = validator.validate(null, suppressEvents);
//检查验证传递和返回一个布尔值。
var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);
// 修改验证标记
formIsValid = formIsValid && currentControlIsValid;
return currentControlIsValid;
}
/**
*组件构件完成事件
* */
private function creationCompleteHandler():void
{
// 初始化定焦点为第一个控件上
resetFocus();
}
/**
* 表单提交
* */
private function submitForm():void
{
Alert.show("提交");
}
/**
* 清除验证信息 重置功能
* */
private function clearFormHandler():void
{
// 清除所有的值
nameInput.text = "";
password.text="";
repassword.text="";
phoneInput.text = "";
emailInput.text = "";
// 清除错误信息
nameInput.errorString = "";
password.errorString="";
repassword.errorString="";
phoneInput.errorString = "";
emailInput.errorString = "";
// 标记为清空
formIsEmpty = true;
// 获取到焦点
resetFocus();
}
// 设置第一个控件获取到焦点
private function resetFocus():void
{
focusManager.setFocus(nameInput);
}
]]>
</mx:Script>
<mx:Validator required="true"
source="{password}" property="text"
valid="handleValid(event)"
invalid="handleValid(event);" />
<mx:Validator required="true"
source="{repassword}" property="text"
valid="handleValid(event)"
invalid="handleValid(event);" />
<!--
Validators
-->
<mx:StringValidator
id="nameValidator"
source="{nameInput}"
property="text"
tooShortError="字符串太短了,请输入最少2个字符. "
tooLongError="字符串太长了,请输入最长16个字符. "
minLength="2"
maxLength="16"/>
<mx:StringValidator id="passwordValidator" source="{password}" property="text"
tooShortError="字符串太短了,请输入最少4个字符. "
tooLongError="字符串太长了,请输入最长20个字符. "
minLength="4" maxLength="20"/>
<mx:StringValidator id="repasswordValidator" source="{repassword}" property="text"
tooShortError="字符串太短了,请输入最少4个字符. "
tooLongError="字符串太长了,请输入最长20个字符. "
minLength="4" maxLength="20"/>
<mx:RegExpValidator id="rpwdV" source="{repassword}" property="text" expression="^{password.text}$"
requiredFieldError="不能为空" noExpressionError="两次密码不一致"/>
<!-- Validate phone number -->
<mx:PhoneNumberValidator
id="phoneValidator"
source="{phoneInput}" property="text"
/>
<!-- Validate email -->
<mx:EmailValidator
id="emailValidator"
source="{emailInput}" property="text"
/>
<!--
User interface
-->
<mx:Panel title="用户注册" >
<mx:Form>
<mx:FormItem label="用户名:">
<mx:TextInput
id="nameInput"
change="validateForm(event);"/>
</mx:FormItem>
<mx:FormItem label="密码: ">
<mx:TextInput
id="password" displayAsPassword="true"
change="validateForm(event)"/>
</mx:FormItem>
<mx:FormItem label="再次输入密码: ">
<mx:TextInput
id="repassword" displayAsPassword="true"
change="validateForm(event)"/>
</mx:FormItem>
<mx:FormItem label="电话: ">
<mx:TextInput
id="phoneInput"
change="validateForm(event);" />
</mx:FormItem>
<mx:FormItem label="Email: ">
<mx:TextInput
id="emailInput"
change="validateForm(event);"
/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar horizontalAlign="center">
<mx:Button
id="submitButton"
label="注册"
enabled="{formIsValid}" click="submitForm()"
/>
<mx:Button
label="重置"
enabled="{!formIsEmpty}"
click="clearFormHandler();"
/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark"
viewSourceURL="src/ValidationUsable/index.html"
width="500" height="400"
defaultButton="{submitButton}"
creationComplete="creationCompleteHandler();"
>
<mx:Script>
<![CDATA[
import mx.validators.Validator;
import mx.events.ValidationResultEvent;
import mx.controls.Alert;
import mx.core.IUITextField;
// Event listener for the valid and invalid events.
private function handleValid(evt:ValidationResultEvent):void {
if (evt.type == ValidationResultEvent.VALID) {
submitButton.enabled = true;
} else {
submitButton.enabled = false;
}
}
//表单是否有效
[Bindable]
public var formIsValid:Boolean = false;
//表单是否为空
[Bindable]
public var formIsEmpty:Boolean = true;
//持有该目前集中控制的对象。
private var focussedFormControl:DisplayObject;
/**
* 验证表单方法
* */
private function validateForm(event:Event):void
{
//检查验证传递和返回一个布尔值相应。
//保存引用当前集中表单控件
//这样isValid()辅助方法可以只通知
//当前集中形式控制和不影响
//任何其他的表单控件。
focussedFormControl = event.target as DisplayObject;
// 标记表单有效的开始
formIsValid = true;
// 检查表单是否为空
formIsEmpty = (nameInput.text == "" && password.text==""&& repassword.text=="" && emailInput.text == ""
&& phoneInput.text == "");
//运行每个验证器反过来,使用isValid()
//辅助方法和更新formIsValid的价值
//因此。
validate(nameValidator);
validate(passwordValidator);
validate(repasswordValidator);
validate(phoneValidator);
validate(emailValidator);
}
/**
* 验证方法
* */
private function validate(validator:Validator):Boolean
{
//得到验证对象
var validatorSource:DisplayObject = validator.source as DisplayObject;
//镇压事件如果当前控制被验证的不是
//当前集中控制的形式。这阻止了用户
//从接收视觉验证提示在其他表单控件。
var suppressEvents:Boolean = (validatorSource != focussedFormControl);
//执行验证。返回一个ValidationResultEvent。
//传递null作为第一个参数使验证器
//使用属性中定义的属性的标记
// < mx:Validator >标记。
var event:ValidationResultEvent = validator.validate(null, suppressEvents);
//检查验证传递和返回一个布尔值。
var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);
// 修改验证标记
formIsValid = formIsValid && currentControlIsValid;
return currentControlIsValid;
}
/**
*组件构件完成事件
* */
private function creationCompleteHandler():void
{
// 初始化定焦点为第一个控件上
resetFocus();
}
/**
* 表单提交
* */
private function submitForm():void
{
Alert.show("提交");
}
/**
* 清除验证信息 重置功能
* */
private function clearFormHandler():void
{
// 清除所有的值
nameInput.text = "";
password.text="";
repassword.text="";
phoneInput.text = "";
emailInput.text = "";
// 清除错误信息
nameInput.errorString = "";
password.errorString="";
repassword.errorString="";
phoneInput.errorString = "";
emailInput.errorString = "";
// 标记为清空
formIsEmpty = true;
// 获取到焦点
resetFocus();
}
// 设置第一个控件获取到焦点
private function resetFocus():void
{
focusManager.setFocus(nameInput);
}
]]>
</mx:Script>
<mx:Validator required="true"
source="{password}" property="text"
valid="handleValid(event)"
invalid="handleValid(event);" />
<mx:Validator required="true"
source="{repassword}" property="text"
valid="handleValid(event)"
invalid="handleValid(event);" />
<!--
Validators
-->
<mx:StringValidator
id="nameValidator"
source="{nameInput}"
property="text"
tooShortError="字符串太短了,请输入最少2个字符. "
tooLongError="字符串太长了,请输入最长16个字符. "
minLength="2"
maxLength="16"/>
<mx:StringValidator id="passwordValidator" source="{password}" property="text"
tooShortError="字符串太短了,请输入最少4个字符. "
tooLongError="字符串太长了,请输入最长20个字符. "
minLength="4" maxLength="20"/>
<mx:StringValidator id="repasswordValidator" source="{repassword}" property="text"
tooShortError="字符串太短了,请输入最少4个字符. "
tooLongError="字符串太长了,请输入最长20个字符. "
minLength="4" maxLength="20"/>
<mx:RegExpValidator id="rpwdV" source="{repassword}" property="text" expression="^{password.text}$"
requiredFieldError="不能为空" noExpressionError="两次密码不一致"/>
<!-- Validate phone number -->
<mx:PhoneNumberValidator
id="phoneValidator"
source="{phoneInput}" property="text"
/>
<!-- Validate email -->
<mx:EmailValidator
id="emailValidator"
source="{emailInput}" property="text"
/>
<!--
User interface
-->
<mx:Panel title="用户注册" >
<mx:Form>
<mx:FormItem label="用户名:">
<mx:TextInput
id="nameInput"
change="validateForm(event);"/>
</mx:FormItem>
<mx:FormItem label="密码: ">
<mx:TextInput
id="password" displayAsPassword="true"
change="validateForm(event)"/>
</mx:FormItem>
<mx:FormItem label="再次输入密码: ">
<mx:TextInput
id="repassword" displayAsPassword="true"
change="validateForm(event)"/>
</mx:FormItem>
<mx:FormItem label="电话: ">
<mx:TextInput
id="phoneInput"
change="validateForm(event);" />
</mx:FormItem>
<mx:FormItem label="Email: ">
<mx:TextInput
id="emailInput"
change="validateForm(event);"
/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar horizontalAlign="center">
<mx:Button
id="submitButton"
label="注册"
enabled="{formIsValid}" click="submitForm()"
/>
<mx:Button
label="重置"
enabled="{!formIsEmpty}"
click="clearFormHandler();"
/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>