The ZipCodeValidator class validates that a String has the correct length and format for a five-digit ZIP code, a five-digit+four-digit United States ZIP code, or Canadian postal code.

CODING:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate the ZipCodeValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<mx:ZipCodeValidator source=”{zip}” property=”text”
trigger=”{myButton}” triggerEvent=”click”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”ZipcodeValidator Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter a 5 or 9 digit U.S. Zip code: “>
<mx:TextInput id=”zip” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate” />
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

The Validator class is the base class for all Flex validators. This class implements the ability for a validator to make a field required, which means that the user must enter a value in the field or the validation fails.

CODING:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the Validator class. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[

// Import necessary classes.
import mx.controls.Alert;
import mx.events.ValidationResultEvent;

// Event listener for the valid and invalid events.
private function handleValid(eventObj:ValidationResultEvent):void {
if(eventObj.type==ValidationResultEvent.VALID)
// Enable Submit button.
submitButton.enabled = true;
else
submitButton.enabled = false;
}

// Submit form is everything is valid.
private function submitForm():void {
Alert.show("Form Submitted!");
}

]]>
</mx:Script>

<!– The Validator class defines the required property and the validator events
used by all validator subclasses. –>
<mx:Validator id=”reqValid” required=”true”
source=”{fname}” property=”text”
valid=”handleValid(event)” invalid=”handleValid(event)”/>

<mx:Panel title=”Validator Example” width=”100%” height=”100%”
paddingTop=”5″ paddingLeft=”5″ paddingRight=”5″ paddingBottom=”5″>

<mx:Form>
<mx:Text width=”100%” color=”blue”
text=”Enter a value in the Name field before you can submit. The E-mail field is optional.”/>

<mx:FormItem label=”Name: ” required=”true”>
<mx:TextInput id=”fname” width=”100%”/>
</mx:FormItem>

<mx:FormItem label=”E-mail address: ” required=”false”>
<mx:TextInput id=”email” width=”100%”/>
</mx:FormItem>

<mx:FormItem>
<mx:Button id=”submitButton” enabled=”false”
label=”Submit” click=”submitForm();”/>
</mx:FormItem>
</mx:Form>

</mx:Panel>
</mx:Application>

The StringValidator class validates that the length of a String is within a specified range

CODING:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate StringValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<mx:StringValidator source=”{fname}” property=”text”
tooShortError=”This string is shorter than the minimum allowed length of 4. “
tooLongError=”This string is longer than the maximum allowed length of 20.”
minLength=”4″ maxLength=”20″
trigger=”{myButton}” triggerEvent=”click”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”StringValidator Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter a name between 4 and 20 characters: “>
<mx:TextInput id=”fname” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate” />
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

The RegExpValidator class lets you use a regular expression to validate a field. You pass a regular expression to the validator using the expression property, and additional flags to control the regular expression pattern matching using the flags property.

The validation is successful if the validator can find a match of the regular expression in the field to validate. A validation error occurs when the validator finds no match.

CODING:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the RegExpValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
import mx.validators.*;

// Write the results to the
private function handleResult(eventObj:ValidationResultEvent):void {
if (eventObj.type == ValidationResultEvent.VALID)
{
// For valid events, the results Array contains
// RegExpValidationResult objects.
var xResult:RegExpValidationResult;
reResults.text="";
for (var i:uint = 0; i < eventObj.results.length; i++)
{
xResult = eventObj.results[i];
reResults.text=reResults.text + xResult.matchedIndex + ” ” +
xResult.matchedString + “\n”;
}
}
else
{
reResults.text=”";
}
}
]]>
</mx:Script>

<mx:RegExpValidator id=”regExpV”
source=”{regex_text}” property=”text”
flags=”g” expression=”{regex.text}”
valid=”handleResult(event)” invalid=”handleResult(event)”
trigger=”{myButton}” triggerEvent=”click”/>

<mx:Panel title=”RegExpValidator Example” width=”95%” height=”95%”
paddingTop=”5″ paddingLeft=”5″ paddingRight=”5″ paddingBottom=”5″>

<mx:Text width=”100%” text=”Instructions:”/>
<mx:Text width=”100%” text=”1. Enter text to search. By default, enter  a string containing the letters ABC in sequence followed by any digit.”/>
<mx:Text width=”100%” text=”2. Enter the regular expression. By default, enter ABC\d.”/>
<mx:Text width=”100%” text=”3. Click the Button control to trigger the validation.”/>
<mx:Text width=”100%” text=”4. The results show the index in the text where the matching pattern begins, and the matching pattern. “/>

<mx:Form>
<mx:FormItem label=”Enter text: “>
<mx:TextInput id=”regex_text” text=”xxxxABC4xxx” width=”100%”/>
</mx:FormItem>

<mx:FormItem label=”Enter regular expression: “>
<mx:TextInput id=”regex” text=”ABC\d” width=”100%”/>
</mx:FormItem>

<mx:FormItem label=”Results: “>
<mx:TextInput id=”reResults” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

The PhoneNumberValidator class validates that a string is a valid phone number. A valid phone number contains at least 10 digits, plus additional formatting characters. The validator does not check if the phone number is an actual active phone number.

CODING:

?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate the PhoneNumberValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<mx:PhoneNumberValidator source=”{phone}” property=”text”
trigger=”{myButton}” triggerEvent=”click”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”Phone Number Validator Panel” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter 10-digit phone number: “>
<mx:TextInput id=”phone” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate” />
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

The NumberValidator class ensures that a String represents a valid number. It can ensure that the input falls within a given range (specified by minValue and maxValue), is an integer (specified by domain), is non-negative (specified by allowNegative), and does not exceed the specified precision

CODING:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate the NumberValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<mx:NumberValidator source=”{age}” property=”text” integerError=”Enter Integer value”
minValue=”18″ maxValue=”50″ domain=”int”
trigger=”{myButton}” triggerEvent=”click”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”NumberValidator Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter an age between 18 and 50: “>
<mx:TextInput id=”age” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate” />
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

The EmailValidator class validates that a String has a single @ sign, a period in the domain name and that the top-level domain suffix has two, three, four, or six characters. IP domain names are valid if they are enclosed in square brackets. The validator does not check whether the domain and user name actually exist.

CODING:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate the EmailValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<mx:EmailValidator source=”{email}” property=”text”
trigger=”{myButton}” triggerEvent=”click”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”EmailValidator Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter an e-mail address: “>
<mx:TextInput id=”email” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate” />
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

The DateValidator class validates that a String, Date, or Object contains a proper date and matches a specified format. Users can enter a single digit or two digits for month, day, and year.

CODING:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate the DateValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<mx:Model id=”CheckModel”>
<dateInfo>
<DOB>{dob.text}</DOB>
</dateInfo>
</mx:Model>

<mx:DateValidator source=”{dob}” property=”text” allowedFormatChars=”/”
trigger=”{myButton}” triggerEvent=”click”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”DateValidator Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter date of birth (mm/dd/yyyy): “>
<mx:TextInput id=”dob” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate” />
</mx:FormItem>
</mx:Form>

</mx:Panel>
</mx:Application>

The CurrencyValidator class ensures that a String represents a valid currency expression. It can make sure the input falls within a given range (specified by minValue and maxValue), is non-negative (specified by allowNegative), and does not exceed the specified precision

CODING:

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate the CurrencyValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<mx:CurrencyValidator source=”{priceUS}” property=”text” precision=”2″
trigger=”{myButton}” triggerEvent=”click”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”CurrencyValidator Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter a U.S. dollar amount: “>
<mx:TextInput id=”priceUS” width=”100%”/>
</mx:FormItem>

<mx:FormItem >
<mx:Button id=”myButton” label=”Validate”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>

The CreditCardValidator class validates that a credit card number is the correct length, has the correct prefix, and passes the Luhn mod10 algorithm for the specified card type. This validator does not check whether the credit card is an actual active credit card account.

CODING:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the CreditCardValidator. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
import mx.controls.Alert;
</mx:Script>

<!– Define model for the credit card data. –>
<mx:Model id=”creditcard”>
<card>
<cardType>{cardTypeCombo.selectedItem.data}</cardType>
<cardNumber>{cardNumberInput.text}</cardNumber>
</card>
</mx:Model>

<mx:CreditCardValidator id=”ccV”
cardTypeSource=”{creditcard}” cardTypeProperty=”cardType”
cardNumberSource=”{creditcard}” cardNumberProperty=”cardNumber”
trigger=”{myButton}” triggerEvent=”click”
cardTypeListener=”{cardTypeCombo}”
cardNumberListener=”{cardNumberInput}”
valid=”Alert.show(‘Validation Succeeded!’);”/>

<mx:Panel title=”CreditCardValidator Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form id=”creditCardForm”>
<mx:FormItem label=”Card Type”>
<mx:ComboBox id=”cardTypeCombo”>
<mx:dataProvider>
<mx:Object label=”American Express” data=”American Express”/>
<mx:Object label=”Diners Club” data=”Diners Club”/>
<mx:Object label=”Discover” data=”Discover”/>
<mx:Object label=”MasterCard” data=”MasterCard”/>
<mx:Object label=”Visa” data=”Visa”/>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label=”Credit Card Number”>
<mx:TextInput id=”cardNumberInput”/>
</mx:FormItem>
<mx:FormItem>
<mx:Button id=”myButton” label=”Check Credit”/>
</mx:FormItem>
</mx:Form>

</mx:Panel>
</mx:Application>