"CSS Layout Techniques" was retired on February 22, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Regular Expressions in JavaScript!
You have completed Regular Expressions in JavaScript!
Preview
Validate an email using a regular expression.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Our last field to validate
is an email address.
0:00
The basic format for
an email address is simple.
0:03
A string of characters followed by an @
sign, another string of characters,
0:06
a dot, and then some top-level
domain like com or net.
0:11
Why don't you pause the video here and
0:15
try to complete the email
validation yourself first?
0:17
Then, I'll show you my solution.
0:20
So to start with,
0:23
I'm going to add the things that
we know we're gonna have to have.
0:24
So I'll put a regular expression,
and then I'll call test on it, and
0:29
pass in email, and then I wanna
return this from our function.
0:34
So emails normally have letters and
numbers before the @ symbol,
0:41
as well as underscores, so we could match
repeated word characters at the beginning.
0:46
But I've also seen them with dots and
pluses.
0:54
Perhaps the safest way to match that
first segment is anything that is not
0:58
an @ symbol.
1:03
Notice I'm using a plus symbol for
the repetition instead of an asterisk.
1:07
That's because there needs to be at
least one character before the @ sign.
1:11
Any characters between the @ symbol and
the dot should be letters, but
1:15
maybe numbers are allowed.
1:20
To be safe, I'll just match anything
that's not an @ symbol or a dot.
1:22
For the final stretch, I'm pretty
sure that only letters are allowed,
1:31
so I'll just use a character set.
1:35
Also, emails are case insensitive.
1:41
I could add a capital A to Z inside
the character set to account for
1:45
this, but I'll just set an i flag for
this example.
1:49
Remember, this case insensitive flag
1:53
makes the parser disregard case
when it looks for matches.
1:56
Finally, let's add a carrot and
dollar sign as we've done before.
2:00
I'll save and refresh the browser.
2:09
And I'll type person@example.com,
and it works.
2:14
This regular expression
will match most emails.
2:23
Developers have some disagreement
around how to validate emails, though.
2:26
Some say there are so
many validations that the only way to
2:30
really know if you have a valid
email address is to send mail to it.
2:34
So a production app might have some
minimal validation that uses an expression
2:38
like this one.
2:43
Then, it might send a verification
email to ensure the address' validity.
2:44
Other developers disagree,
2:50
believing that the best way to
validate is in the browser.
2:51
Here's a site that aims to account for
2:55
every possible email address with Regex
that also excludes all invalid ones.
2:58
There's a lot of good information here
that I'll let you read through on
3:04
your own.
3:08
HTML also supports basic validation
of a specific email input type.
3:08
See the teacher's notes for
more information.
3:15
So far, we've been testing strings
to see if they match expressions.
3:18
Next, let's look at how
we can go further and
3:22
replace parts of strings
using regular expressions.
3:25
See you there.
3:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up