[转]flex数据验证

数据验证是指应用程序中对输入的数据进行某种方式的校验。例如，电话号码必须为数字，E-mail地址有特定的规则等。本章将详细介绍Flex 3.0数据验证的基本方法和自定义方法。本章结尾还将提供一个用户注册的实例来帮助读者掌握数据验证。

1.3.1 数据验证组件概述

数据验证组件是专门针对数据验证的特殊组件，包含一定规则的验证及出错提示。使用数据验证组件使得对数据验证更加方便，摆脱了复杂的验证逻辑，有利于应用程序的开发。

Flex 3.0中提供了一些常用的组件进行数据验证，这些组件能基本满足用户的要求。若用户想自定义所需的数据验证，可继承类型相近的验证组件，从而创建自定义的数据验证组件。Flex 3.0提供的数据验证组件，包括CreditCardValidator、CurrencyValidator、DateValidator等。这些组件可以有效地完成验证任务，出错提示也很丰富。

Flex 3.0提供的基本验证组件如表19-1所示。

表19-1 基本验证组件

组件名	说明
CreditCardValidator	信用卡号码验证
CurrencyValidator	货币验证
DateValidator	日期验证
EmailValidator	Email验证
NumberValidator	数字验证
PhoneNumberValidator	电话号码验证
RegExpValidator	正则表达式验证
SocialSecurityValidator	美国“Social Security”号码验证
StringValidator	字符串验证
ZipCodeValidator	邮编验证

Flex 3.0提供的一些验证组件是以美国的规则定制的。例如，美国邮编长度为5位，中国的邮编长度为6位。当验证组件不能满足要求时，用户需要修改组件的某些属性从而达到要求。例如，数字验证组件中可指明最大值和最小值。若用户有特殊的验证要求而组件未提供属性或方法时，用户可用自定义组件来实现验证效果。

1.3.2 如何使用数据验证组件

使用数据验证组件的语法如下所示。

<验证组件 source="{需验证的数据组件id}" property="数据组件的属性">

指明source属性和property属性表示验证组件针对某一数据组件的特定属性进行验证。例如，邮箱验证组件对某输入框的text属性进行验证。

以下代码使用<mx:PhoneNumberValidator>组件对一个输入框中的文本进行电话号码验证。

<!--定义“PhoneNumberValidator”，用以校验电话号码-->

<mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/>

<mx:Panel>

<mx:TextInput id="phoneInput"/>

</mx:Panel>

由于验证组件都不为可视化组件，所以不能放置于可视化组件内。本程序中<mx:PhoneNumberValidator>组件不能放置于<mx:Panel>组件中。

1.3.3 验证触发方式

验证触发方式是指用户采用何种动作触发验证。常用的触发方式有默认触发和任意动作触发。默认触发是指当焦点离开输入源时触发验证。任意动作触发是指用户可指定某一动作触发验证。前者是开发过程中最常使用到的一种方式，后者比较灵活，也比较容易理解。

1．默认触发验证

当用户把焦点离开输入源时触发默认触发验证。其语法如下所示。

<mx:验证组件类型 source="{输入源id}" property="输入源的属性">

默认触发方式需确定验证组件的source属性和property属性，其他属性默认。

以下代码采用默认触发验证方式。当焦点离开第一个输入框时触发验证。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<!--定义"PhoneNumberValidator"，用以校验电话号码 -->

<mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/>

<mx:Panel title="默认触发验证" width="400" height="300" horizontalAlign= "center" verticalAlign="middle" x="261" y="77">

<mx:Label text="请在第一个输入框中输入,然后焦点转移到第二个输入框"/>

<mx:TextInput id="phoneInput"/>

<mx:Label text="{phoneInput.errorString}"/> <!--Label组件，用以显示验证结果-->

<mx:TextInput />

</mx:Panel>

</mx:Application>

验证组件的结果直接反映在数据组件上。本程序中若输入框组件phoneInput验证错误，结果为输入框边框颜色变红色。验证错误的提示存储于数据组件的errorString属性中。

2．任意动作触发验证

用户可根据需要触发验证。例如，当按下“验证”按钮时触发验证。

任意动作触发验证有两种写法。一种是在验证组件中指明触发器和触发动作。另一种是执行事件处理函数。

在验证组件中指明触发器和触发动作的语法如下所示。

<mx:验证组件类型

source="{输入源id}"

property="输入源的属性"

trigger="{触发器}"

triggerEvent="触发事件"

>

trigger属性指明触发验证的组件，也称为触发器。triggerEvent属性表示触发验证组件的方法。

以下代码当用户单击“验证”按钮时触发邮编验证。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<!--定义"ZipCodeValidator"，用以校验邮编-->

<mx:ZipCodeValidator id="zipV" source="{myZip}" property="text" trigger ="{mySubmit}" triggerEvent="click"/>

<mx:Panel title="click动作触发验证" width="352" height="202" horizontalAlign ="center" verticalAlign="middle">

<mx:TextInput id="myZip"/> <!--输入框组件-->

<mx:Label text="{myZip.errorString}"/> <!--Label组件，用于显示验证结果-->

<mx:Button id="mySubmit" label="验证"/> <!—按钮组件，用于触发验证-->

</mx:Panel>

</mx:Application>

 

任意动作的触发也可采用代码触发验证方式。代码触发验证的方式符合Flex 3.0的事件机制，更容易理解。其语法如下所示。

<组件事件="验证组件.validate();"/>

验证组件都包含一个validate方法，用以代码执行验证。

上述程序使用代码方式触发验证的代码如下所示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<!--定义"ZipCodeValidator"，用以校验邮编-->

<mx:ZipCodeValidator id="zipV" source="{myZip}" property="text">

<mx:Paneltitle="click动作触发验证"width="352"height="202"horizontalAlign ="center" verticalAlign="middle">

<mx:TextInput id="myZip"/> <!--输入框组件-->

<mx:Label text="{myZip.errorString}"/> <!--Label组件，用于显示验证结果-->

<!--按钮组件，用于触发验证-->

<mx:Button id="mySubmit" label="验证" click="zipV.validate();"/>

</mx:Panel>

</mx:Application>

1.3.4 验证失败处理

验证失败时需要做错误的提示及处理。验证组件中提供了丰富的错误类型，只是这些错误类型的提示是英文的，用户可能需要改变提示。修改错误提示的方法是修改组件中相应的错误类型属性。例如，PhoneNumberValidator组件中的wrongLengthError属性表示长度错误提示。

用户可根据需要修改相应的出错信息。其语法如下所示。

<验证组件错误类型属性="自定义错误提示"/>

以下代码自定义EmailValidator组件中的错误提示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

<mx:Script>

<![CDATA[

import mx.events.ValidationResultEvent; //引用ValidationResult Event类

import mx.controls.Alert; //引用Alert类

private function checkHandle():void //验证处理函数

{

if(emailV.validate().type==ValidationResultEvent.VALID) //验证通过

{

Alert.show("电子邮件验证成功"); //提示"验证成功"

}

}

]]>

</mx:Script>

<!--电子邮箱验证组件-->

<mx:EmailValidator

id="emailV"

source="{txtEmail}"

property="text"

invalidCharError="非法字符"

invalidDomainError="非法域"

invalidIPDomainError="非法IP域"

missingAtSignError="缺少@符"

missingPeriodInDomainError="缺少域后缀"

missingUsernameError="缺少用户名"

/>

<mx:Panel title="EmailValidator验证失败处理" width="352" height="202" horizontalAlign="center" verticalAlign="middle">

<mx:TextInput id="txtEmail"/> <!--输入框组件-->

<!--Label组件，用于显示验证结果-->

<mx:Label text="{txtEmail.errorString}"/>

<mx:Button id="mySubmit" label="验证" click="checkHandle();"/> <!--按钮组件，用于验证处理-->

</mx:Panel>

</mx:Application>

判断验证是否正确的语法如下所示。

If(验证组件id.validate().type==ValidationResultEvent.VALID)

ValidationResultEvent类包含于“mx.events.*”中，是验证结果事件类。其中，INVALID值表示验证失败，VALID值表示验证成功。

1.3.5 自定义验证组件

当验证组件不能满足用户的特殊验证需求时，用户可考虑自定义验证组件。一般来说，多条件复杂数据验证都需要自定义验证组件。例如，字符串长度为3~43，内容不能包含某些脏字。

Flex 3.0中自定义验证组件先继承功能最相近的验证组件，然后重写验证组件中的doValidation方法。读者可参照如下步骤自定义验证组件。

单击“File”|“New”|“ActionScript Class”命令，弹出“New ActionScript Class”对话框，如图19-9所示。

在“Package”文本框中输入相对路径。在“Name”文本框中输入类名。在“Superclass”文本框中输入继承类，此处为“mx.validators.validator”。勾选“Generrate onstructor from superclass”表示沿用继承类的构造函数。单击“Finish”按钮，完成类的创建。

编写自定义验证组件类“myValidators.as”。

myValidators类继承于Validator类，所以包含了Validator类中的doValidation方法。此方法用于定义具体验证的处理方法。

以下代码是完整的“myValidators.as”类。

//myValidators.as

package myCompenent

{

import mx.validators.Validator; //引用Validator类

import mx.validators.ValidationResult; //引用ValidationResult类

public class myValidators extends Validator

{

public function myValidators() //构造函数

{

super();

}

private var results:Array; //定义一个数组，用以存储错误

//重写验证函数

override protected function doValidation(value:Object):Array

{

var s:String = value as String;

results = []; //清空数组

results = super.doValidation(value); //先用继承类中的doValida tion方法验证

if (results.length > 0) //如果验证时有错，返回错误信息

return results;

if(s.length>6) //自定义验证，字符长度不超过6

{

//记录出错信息

results.push(new ValidationResult(true,"text","StringTooLong", "字符长度超过6了"));

}

return results;

}

}

}

（5）extends关键字表示继承。

（6）super关键字表示继承子类中的方法，所以“super.doValidation(value)”语句表示继承子类中的doValidator方法。

（7）override关键字表示重写函数。

（8) ValidationResult类是验证结果类，包含于“mx.validators.*”中。ValidationResult类的构造函数有四个参数。第一个参数表示是否为错误类型，第二个参数表示指向某特定属性，第三个参数表示错误类型，第四个参数表示错误提示。

（9）本程序中自定义了“StringTooLong”错误类型，提示“字符长度超过6了”。此错误在数据组件的长度超过6位时发生。

（4）调用自定义验证类。

调用自定义组件时必须指明名称空间。Flex 3.0提供的组件都在“mx”名称空间下，所以在新建MXML后都自动生成xmlns:mx="http://www.adobe.com/2006/mxml"语句。

引用自定义组件的语法如下所示。

<最外层组件 … xmlns:空间名称="类所属的包">

…

<空间名称:自定义组件/>

空间名称可任意取名。类所属的包必须与类定义时的package关键字相同。

以下代码引用自定义组件myValidators。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:MyComp="myCompenent.*">

…

<MyComp:myValidator … />

以下代码调用myValidator组件验证输入框中的数据。

<?xml version="1.0" ?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"xmlns:MyComp="myCompenent.*" fontSize="13">

<!--自定义组件myValidators，用于验证字符串数据-->

<MyComp:myValidators id="myVal"

source="{txtString}" property="text"

/>

<mx:Paneltitle="自定义验证组件" width="300" height="200" horizontalAlign= "center" verticalAlign="middle">

<mx:TextInput id="txtString"/> <!--输入框组件-->

<mx:Label text="{txtString.errorString}"/> <!--Label组件，用于显示验证结果-->

<mx:Button label="验证" click="myVal.validate();"/> <!--按钮组件，用以触发验证-->

</mx:Panel>

</mx:Application>