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
When users enter data your program doesn't expect, errors can result. That's why almost any form you visit on the web is validated. Learn what validation is and how regular expressions can help validate forms.
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
[MUSIC]
0:00
Now that you have an idea of what regular
expressions are an how to us them,
0:04
let's put them to work in a project.
0:09
We'll be using regexes to solve
a common problem in web development,
0:12
validating user input.
0:16
When filling out an online registration
form, you may have incorrectly
0:18
entered your email address, or forgotten
to type a digit of your phone number.
0:23
Validation is the process of guarding
against receiving bad or inaccurate data.
0:27
Regular expressions can help your
program know whether to accept the value
0:33
by matching the input with
the pattern you expect.
0:37
Let's look at the validation
we'll implement in this course.
0:41
Here's the completed form,
including validation.
0:46
It accepts a username, password,
telephone and email address.
0:49
As I type into the Username field,
it actively reads what I type.
0:54
And if I enter characters
that aren't allowed,
0:59
a tooltip shows up letting
me know what I can type.
1:01
If change what I'm entering to only
lowercase letters, the tooltip disappears.
1:05
If I type a password,
I have a similar experience.
1:10
Though a different pattern is accepted.
1:14
For the phone number, as soon as I
enter ten digits the tooltip goes away.
1:17
But watch what happens when
I tab to the next field.
1:22
The telephone number is reformatted
with parentheses, a space and a hyphen.
1:25
Finally, the email address only
accepts valid email formats.
1:31
You can take what you
learn in this project and
1:40
apply it to forms you'll
create in the real world.
1:42
Validation like this can
reduce user frustration,
1:45
while ensuring you get valid data
to use in your applications.
1:48
To accomplish this form validation,
we'll use two methods.
1:52
One, to test whether a string
matches a regular expression and
1:56
another to replace text in a string by
matching a pattern, the phone number.
2:01
We'll come back to these
methods in a moment, but
2:06
first let me show you how to create
a regular expression in JavaScript.
2:08
To create a regular expression,
start by typing a forward slash,
2:13
then the expression,
then another forward slash.
2:18
Here's an example.
2:22
This stores a regular expression object
in the variable named regexObject.
2:24
JavaScript holds regular expressions in
2:29
special objects that can
be used a number of ways.
2:31
We'll see this in action soon.
2:35
The syntax you see here is
known as literal syntax.
2:37
It's probably the way you'll use
most often to create regexes.
2:41
You can also create them by using
the regular expression constructor.
2:46
Here's an example of the same
regular expression I just showed you
2:51
in the literal form.
2:54
Notice the regular expression
is passed in as a string.
2:56
This is useful for
dynamically creating regular expressions.
3:00
For example, if the user is typing in
an expression to use for searching a block
3:04
of text, you could take the input and
pass it to the regex constructor.
3:09
Then you could use the expression to
search for the text and return the result.
3:14
On the other hand,
use the literal syntax when
3:18
you already know the regular
expression you want to use.
3:21
For example,
3:25
in this course we'll use regular
expression literals to check form input.
3:26
We won't need to make them dynamically.
3:31
We'll know what we want to accept from
the user when we write the program.
3:33
Using literal syntax is
not only more concise and
3:38
easy to read,
it also generally performs better.
3:41
Now that you know how to create
regular expressions in JavaScript,
3:44
let's see how they can be used.
3:49
In the next video,
3:51
I'll show you how to use the two methods
I mentioned earlier, match and replace.
3:52
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