Validating a Password3:53 with Joel Kraft
Learn how to validate a password that requires at least one lowercase letter, one uppercase letter and one number.
Password Regular Expression
Here's the regular expression we end up with in the video. It uses a "lookahead".
Lookaheads in Regular Expressions
Here's an article on lookaheads (and lookbehinds) in regular expressions.
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
You need to sign up for Treehouse in order to download course files.Sign up