flex验证控件

来源：互联网发布：淘宝怎么直播编辑：程序博客网时间：2024/05/11 05:59

Validator 类是所有 Flex 验证程序的基类。此类实现使验证程序生成必填字段的功能，必填字段是指用户必须在该字段中输入值，否则验证会失败。

包mx.validatorsClasspublic class Validator继承Validator EventDispatcher ObjectImplementsIMXMLObjectSubclassesCreditCardValidator, CurrencyValidator, DateValidator, EmailValidator, NumberValidator, PhoneNumberValidator, RegExpValidator, SocialSecurityValidator, StringValidator, ZipCodeValidator

MXML 语法

<mx:Validator
    enabled="true|false"
    listener="Value of the source property"
    property="No default"
    required="true|false"
    requiredFieldError="This field is required."
    source="No default"
    trigger="Value of the source property"
    triggerEvent="valueCommit"
/>（可以查看action script3.0的api http://livedocs.adobe.com/flex/3_cn/mx/validators/Validator.html）

1、Validator.mxml

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

<!--

各种验证控件的基类 Validator 的 Demo，其可用于必填验证

-->

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"

title="Validator - Validator (其他验证器的基类，可用于必填验证)">

<mx:Validator id="validator"

source="{txtInput}" property="text"

required="true" requiredFieldError="请输入必填字段"

trigger="{btnSubmit}" triggerEvent="click"

<mx:Form>

<mx:FormItem label="必填字段: ">

<mx:TextInput id="txtInput"/>

</mx:FormItem>

<mx:FormItem >

<mx:Button id="btnSubmit" label="验证" />

</mx:FormItem>

</mx:Form>

</mx:Panel>

2、DateValidator.mxml

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

<!--

应用日期验证控件的 Demo

-->

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"

title="Validator - DateValidator (日期验证)">

<mx:DateValidator source="{txtDate}" property="text"

required="true" requiredFieldError="请输入日期"

allowedFormatChars="-" inputFormat="YYYY-MM-DD"

trigger="{btnSubmit}" triggerEvent="click"

valid="mx.controls.Alert.show('验证成功');"

invalid="mx.controls.Alert.show('验证失败');"

wrongDayError="日输入错误"

wrongMonthError="月输入错误"

wrongYearError="年输入错误"

wrongLengthError="日期长度错误"

invalidCharError="日期分隔符错误"

formatError="inputFormat 配置错误"

<mx:Form>

<mx:FormItem label="日期(格式 yyyy-MM-dd): ">

<mx:TextInput id="txtDate"/>

</mx:FormItem>

<mx:FormItem >

<mx:Button id="btnSubmit" label="验证" />

</mx:FormItem>

</mx:Form>

</mx:Panel>

3、EmailValidator.mxml

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

<!--

应用 Email 验证控件的 Demo

-->

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"

title="Validator - EmailValidator (Email验证)">

<mx:EmailValidator id="emailValidator" source="{txtEmail}" property="text"

missingAtSignError="缺少@"

valid="mx.controls.Alert.show('验证成功');"

<mx:Form>

<mx:FormItem label="Email: ">

<mx:TextInput id="txtEmail"/>

</mx:FormItem>

<mx:FormItem >

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

</mx:FormItem>

</mx:Form>

</mx:Panel>

4、RegExpValidator.mxml

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

<!--

应用正则表达式验证控件的 Demo

-->

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"

title="Validator - RegExpValidator (正则表达式验证)">

<mx:Script>

<![CDATA[

import mx.events.ValidationResultEvent;

import mx.validators.*;

import mx.controls.Alert;

private function handleResult(e:ValidationResultEvent):void

{

if (e.type == ValidationResultEvent.VALID)

{

Alert.show("验证成功");

}

]]>

</mx:Script>

<mx:RegExpValidator id="regExpValidator"

source="{txtInput}" property="text"

flags="g,i" expression="^[a-z]+$"

valid="handleResult(event)" invalid="handleResult(event)"

trigger="{btnSubmit}" triggerEvent="click"

noMatchError="请输入正确的英文字母"

required="false"

<mx:Form>

<mx:FormItem label="请输入英文字母: ">

<mx:TextInput id="txtInput"/>

</mx:FormItem>

<mx:FormItem >

<mx:Button id="btnSubmit" label="验证" />

</mx:FormItem>

</mx:Form>

</mx:Panel>