flex实现注册和重置

<?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>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值