Thursday, July 1, 2010

How to check if e-mail is valid using Actionscript 3 and regular expressions (tutorial)

A lot of people, especially when creating forms, need the flash to check, whether the entered e-mail is valid. This tutorial explains how to do that in Actionscript 3. Here's what we're going to make:


Basically, it's all done with Regular expressions. In computing, regular expressions, also referred to as regex or regexp, provide a concise and flexible means for matching strings of text, such as particular characters, words, or patterns of characters.

If you are completely new to Regular expressions, I recommend you reading Adobe livedocs about that topic (Programming ActionScript 3.0 > Using regular expressions). If you just want the code, continue.

Firstly, make an input text field on the stage with instance name "email" without quotes. Create a movieclip on the stage and put it somewhere around the input field, give it two frames. On the first frame draw a symbol that would appear if the entered e-mail is valid, on the second frame - a symbol that would appear if the e-mail is not valid. Give the movie clip instance name of "checker".

The code is fairly simple:

stage.addEventListener(Event.ENTER_FRAME, loop);
var pattern:RegExp=/(^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[a-zA-Z]{2,6})/;
function loop(Event) {
 if (pattern.test(email.text)) {
  checker.gotoAndStop(1);
 } else {
  checker.gotoAndStop(2);
 }
}

First we set up a listener that calls function "loop" every frame. Then we set up our regular expression (explained later), finally we tell the flash what to do if the e-mail is entered correctly and incorrectly.

Now, back to the regular expression.

What we're trying to do, is to create the right criteria for entered e-mail. The structure needs to be like this: username @ domain . com/org/etc.

The username can only contain letters a-z and A-Z, numbers, and the symbol "_".
The domain can only contain letters a-Z and A-Z, numbers, and the symbol "-", which can't be the first or the last symbol of the domain.
The last part has to contain 2-6 symbols (a-z or A-Z).

Now that we know what we're going to make, let's write our regular expression.

We write "/" because we're starting an expression, "(" means that we're opening a group, "^" means the beginning of the line. We can put symbol @, which means there there should be symbol @. So far we have:

/(^@)/

The username can only contain a-z, A-Z, 0-9, "-" and "." symbols in this example, "+" means that the previous piece should be repeated once or more, which results in:

/(^[a-zA-Z0-9_\.-]+@)/

The domain can contain a-z, A-Z, 0-9 and "-" symbols, however the first and the last symbols should not be "-".

/(^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9])/

Now we need to add a dot. Because a dot is one of the RegExp built-in metasymbol, and we want it to be a text symbol, we write an "\" in front of it. Then we create a part of a-z or A-Z symbols that can be repeated from 2 to 6 times.

/(^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[a-zA-Z]{2,6})/

There you go! Pretty simple when you understand what you're doing.

1 comment:

development@tab.at said...

/(^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[a-zA-Z]{2,6})/

this will not work if you add e.g. and umlaut at the end like
"test@test.comö"

the correct form would be /(^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[a-zA-Z]{2,6}$)/

The $ marks end of text

Post a Comment