- 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 a Password
3:53Learn how to validate a password that requires at least one lowercase letter, one uppercase letter and one number.
Normally, you'd want the characters
in a password input hidden from view.
0:00
The HTML field does this automatically,
0:05
replacing any typed character
with a bullet symbol.
0:07
This hides the password from
anyone spying over your shoulder.
0:11
To see what we're doing though, I'm going
to change this to a simple text input so
0:16
we can see what we type into the field.
0:21
Now we'll be able to test it and
make sure our validation works.
0:32
And when we have it working, we can
just change it back to a password type.
0:35
We need to validate that the input
contains three types of characters,
0:40
an upper case, a lower case, and a number.
0:44
It has to have at least one of each.
0:50
Because these can be in any order,
0:52
this is a little more challenging
to do with one regular expression.
0:54
Remember the issue we ran into in the last
video where we needed a caret and
0:59
a dollar sign to eliminate
partial matches?
1:04
You can use partial matching
to your advantage here.
1:07
I'd like to challenge you to think of
how to accomplish this validation.
1:11
I'll give you a hint.
1:15
It involves using the logical and
operator and several regular expressions.
1:16
Pause the video and
give it a try if you want.
1:22
We can use expressions
without the caret and
1:25
dollar signs constraints
to our advantage here.
1:27
If I type Character set from a to z and
1:31
test the password input,
that will match any
1:36
lower case letter present in the input.
1:41
I can then put a logical and
operator followed by another expression.
1:46
This expression will return true if
the test string contains at least one
1:58
lowercase and one uppercase letter.
2:02
To include numerals, I'll just copy
this expression and paste it on the end.
2:05
Then I'll test for
all numerals in the character set.
2:17
I'll break these lines to
make it more readable.
2:20
And don't forget to return
the entire expression.
2:30
Let's test it in the browser.
2:41
It works!
2:49
We've successfully validated this field.
2:50
You could even use a single regular
expression to get the same results.
2:53
This regex does the trick.
2:57
I've pasted it into the teacher's notes so
you can try it yourself.
2:59
It's pretty complicated and
3:03
uses an advanced Regex feature that
I'm not covering in this course.
3:04
It's called a look ahead.
3:08
If you want to read about it,
see the links in the teacher's notes.
3:10
I have a confession to make.
3:14
I found this regular expression on
the web, but that's not a bad thing.
3:16
And I only mention that to say that
someone else has probably come up with
3:19
a Regex for most of your needs.
3:24
This is especially true for
form validation.
3:26
If you're in need of a regular expression,
I recommend searching the web first.
3:29
Its great to know how to create
regular expressions yourself, however.
3:34
Searching can be more trouble
than it's worth at times.
3:38
It is also possible that no one has yet
created a regex for
3:41
the exact pattern you need to match.
3:45
With that in mind, let's keep going.
3:48
In the next video we'll tackle
the phone number field.
3:50