flex验证器1，基本原理

注：原创作品，分享以供交流学习，转载请注明出处

flex四种验证方式：
1，实时验证。
   应用程序基于每次键盘敲击或鼠标点击来验证输入的内容是否符合要求或正确无误。
2，提交值验证。
   类似实时验证，但不验证每次键盘操作，而是在用户填写完成并提交其输入值验证（
   例如按回车键或tab键更改字段）
3，通过性验证。
   通常由单击按钮触发，这种验证会一次性检查所有表单输入字段，以确保所有输入值都是有效的。
4，脚本式验证
   使用ActionScript动态创建验证器，甚至在多个元素上重用一个验证器。

   在所有的这些方式中，决定何时进行验证是开发人员。如果发现不一致，flex会凸显出问题字段
（以不显著的方式）并提供一个友善的鼠标悬停消息，用以说明问题所在。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!--
		验证器工作过程如下：
		1，焦点改变，即焦点从一个ui元素转移到另一个ui组件上，可能是鼠标单击按tab键，回车键所致。
		   这时一般会导致输入控件提交数值。
		
		2，提交文本字段中的内容，这里文本字段为空，因此值也为空。
		3，由于triggerEvent默认是valueCommit。验证器被设置为监听text属性的valueCommit事件。
		4，当textInput对象的text属性为空导致验证失败后，将字段突出显示为红色
		-->
		
		<!-- validator非视觉验证组件,必须包含在Declarations组件中
		属性介绍如下：
		source:要验证的页面上的组件的id
		property:被验证的组件的属性，例如input的text属性
		required:true或false，被验证的组件的被验证属性是否对用户是必须填写的。
		enable：true或false，用来标志验证器是否其作用
		requiredFieldError:如果为true，被验证的组件的属性text是必填的，如果用户没有填写，那么
		                   这个属性就是 显示用户自定义的错误提示信息。
		invalid：组件如果没有通过验证器验证后，调用的函数。
		valid：组件通过验证，调用的函数
		listener:验证不通过后，flex会在相应组件上显示错误信息，这个属性就是让开发人员定义在哪一个组件
		         上显示错误信息。默认值是source制定的组件
		trigger:这个属性来决定触发验证器工作的页面上的控件，
		triggerEvent:来制定trigger发生什么事件的时候执行验证器
		-->
		<mx:Validator source="{username}" 
					  property="text" 
					  required="true" 
					  enabled="true"
					  requiredFieldError="名户名是必须填写的"
					  invalid="validator1_invalidHandler(event)"
					  valid="validator1_validHandler(event)"
					  listener="{password}"
					  />
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.ValidationResultEvent;
			protected function validator1_invalidHandler(event:ValidationResultEvent):void
			{
				Alert.show('用户名称是必须填写的');
			}

			protected function validator1_validHandler(event:ValidationResultEvent):void
			{
				Alert.show('谢谢您，填写用户名');
			}
		]]>
	</fx:Script>
	
	<s:VGroup horizontalCenter="0" verticalCenter="0">
		<s:Label text="用户名:"/>
		<s:TextInput id="username"/>
		<s:Label text="密码："/>
		<s:TextInput id="password"/>
	</s:VGroup>
</s:Application>