Validating an Email3:30 with Joel Kraft
Validate an email using a regular expression.
Email Regular Expression
HTML5 Email Validation
HTML5 has built-in suport for email validation. Here's an MDN article with more info.
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 email@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 up