flex的数据验证！

19.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>组件中。

 19.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属性中。

本程序的运行效果如图19-6所示。

图19-6  默认触发验证效果

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>

本程序的运行效果如图19-7所示。

图19-7  click动作触发验证

任意动作的触发也可采用代码触发验证方式。代码触发验证的方式符合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>

 19.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值表示验证成功。

本程序的运行效果如图19-8所示。