flex验证控件

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

 

包	mx.validators
Class	public class Validator
继承	Validator  EventDispatcher  Object
Implements	IMXMLObject
Subclasses	CreditCardValidator, 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 >