- What is Validation? 3:57
- Using Regular Expressions in JavaScript 2:33
- Flags 4:12
- Review: Regular Expressions with JavaScript 5 questions
- Validating a Username 5:16
- Validating a Password 3:53
- Validating a Phone Number 1:50
- Validating an Email 3:30
- Form Validation 2 objectives
- Review: Validating with Regular Expressions 5 questions
Preview
Video Player
00:00
00:00
Validating an Email
3:30Validate an email using a regular expression.
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