mx.validators包的使用实例之一-用Validator检测必填项

2008-03-04 [437] technology flex validator

mx.validators包，在Flex框架中是相当的有用，但由于其功能复杂，我总是边用边忘。现将使用方法记录在这里把……

第一个例子

请使用下面的链接升级 Flash Player 到最新版本：

安装最新的Flash Player插件

上面这个例子演示了最简单的用法。如果在“用户名：”输入框中不输入任何文字，那么当使用Tab键把输入焦点动TextInput改变到Button的时候，TextInput的边框会变红，鼠标移动到边框上，就会出现提示文字。

这个效果的源码如下：

1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="120">
3    <mx:Validator id="nameV" source="{nameTI}" property="text" requiredFieldError="必须输入用户名！"/>
4    <mx:FormItem label="用户名：">
5        <mx:TextInput id="nameTI"/>
6    </mx:FormItem>  
7    <mx:Button id="btn" label="提交" />
8</mx:Application>

从上面的源码可以看出，要使用mx.validators包中的功能真的很简单。Validator组件的功能是检测必填项。我们把要检测的组件的名字写在source属性中，把要检测的组件的属性写在property属性中，然后自定义requiredFieldError属性的值即可。当然requiredFieldError属性的值也可以不定义，那么就会使用默认的提示文字（英文）。

上面的错误提示的文字有些看不清，只需要加上这样一句就OK了：

1<mx:Style>
2    .errorTip
3    {
4        fontSize: 12;
5    }
6</mx:Style>

上面是一个小小的热身，让我们再来看几个简单的例子。

控制检测时机

默认的情况下，Flex当我们切换组件焦点的时候检测，能不能改变这个检测时机？看看下面这个例子：

请使用下面的链接升级 Flash Player 到最新版本：

安装最新的Flash Player插件

在上面这个例子中，按Tab键切换焦点已经不能触发检测动作了，只有单击“提交”按钮才会触发检测。源码如下：

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="150">
 3	<mx:Style>
 4		<![CDATA[
 5		.errorTip
 6		{
 7			fontSize: 12;
 8		}
 9		]]>
10	</mx:Style>
11	<mx:Validator id="nameV" source="{nameTI}" property="text" 
12		requiredFieldError="必须输入姓名！"
13		trigger="{btn}" triggerEvent="click"/>
14	<mx:Validator id="ageV" source="{ageTI}" property="text" 
15		requiredFieldError="必须输入年龄！"
16		trigger="{btn}" triggerEvent="click"/>
17	<mx:FormItem label="姓名：">
18		<mx:TextInput id="nameTI"/>
19	</mx:FormItem>
20	<mx:FormItem label="年龄：">
21		<mx:TextInput id="ageTI"/>
22	</mx:FormItem>
23	<mx:Button id="btn" label="提交" />
24</mx:Application>

这是因为，在默认情况下，Validator 会在Flex发出valueCommit事件的时候进行检测，因此当焦点改变的时候，会自动进行检测。而上面的源码中，则手动指定了进行检测的事件是btn按钮的click事件。

控制错误显示的目标

Validator还有一个listen属性，这个属性有什么用呢？它用来指定检测的错误信息显示在哪个组件上。这有什么作用呢？难道我们检测到错误信息之后，不显示在发生错误的组件上，反而显示到其它组件上不成？看看例子把：

请使用下面的链接升级 Flash Player 到最新版本：

安装最新的Flash Player插件

这是源码：

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12" width="300" height="200">
 3	<mx:Style>
 4		<![CDATA[
 5		.errorTip
 6		{
 7			fontSize: 12;
 8		}
 9		]]>
10	</mx:Style>
11	<mx:Validator id="nameV" source="{nameTI}" property="text" 
12		requiredFieldError="必须输入姓名！"
13		trigger="{btn}" triggerEvent="click"/>
14	<mx:Validator id="ageV" source="{ageTI}" property="text" 
15		requiredFieldError="必须输入年龄！"
16		trigger="{btn}" triggerEvent="click"/>
17	<mx:Validator id="sexV" source="{sexRBG}" property="selectedValue" 
18		requiredFieldError="必须选择性别！"
19		trigger="{btn}" triggerEvent="click"
20		listener="{maleRB}"/>
21	<mx:FormItem label="姓名：" width="150">
22		<mx:TextInput id="nameTI"/>
23	</mx:FormItem>
24	<mx:FormItem label="年龄：" width="150">
25		<mx:TextInput id="ageTI"/>
26	</mx:FormItem>
27	<mx:FormItem label="性别：" direction="horizontal" width="150">
28		<mx:RadioButtonGroup id="sexRBG"/>
29		<mx:RadioButton id="maleRB" groupName="sexRBG" label="男" value="1"/>
30		<mx:RadioButton id="femaleRB" groupName="sexRBG" label="女" value="0"/>
31	</mx:FormItem>
32	<mx:Button id="btn" label="提交" />
33</mx:Application>

在上面的例子中，对于性别的选择，由于检测两个RadioButton比较麻烦，采用了检测RadioButtonGroup的selectedValue属性的方法，如果这个属性为空，就说明两个RadioButton都没有选择。但RadioButtonGroup并不是一个可视组件，检测的错误信息无法显示出来，所以这里就使用了listen属性将显示信息转到maleRB组件上进行显示了。

本例源码下载
1 文件