Preview
Video Player
00:00
00:00
A Better Telephone Number Validator
3:29Make the telephone validator we wrote earlier more flexible, allowing users to format their input any way they choose.
Remember the telephone
validator we wrote earlier?
0:00
To create valid input, a user is expected
to manually format the phone number with
0:03
parentheses [SOUND], a space,
[SOUND] and a hyphen.
0:08
This doesn't provide a very good
experience since our users have
0:12
no flexibility in how they
type in their phone number.
0:15
Some users might feel more comfortable
formatting the number complete with
0:19
parentheses and hyphens [SOUND].
0:23
But a lot of other people would
probably rather just enter the numbers.
0:25
Let's create a regular expression
that can recognize a telephone number
0:29
whether users format it or not.
0:34
I'm in app.js, and here's the telephone
validator we wrote earlier.
0:36
To write regular expressions, I find it
helpful to work in a tool like RegexPal so
0:42
I can see immediately if I'm
on the right track or not.
0:47
I'll copy this Regex and
paste it into RegexPal.
0:50
Down below, I've already put in both
kinds of numbers I want to accept.
0:56
If you're pasting in,
1:00
you might have to type a bit to get
RegexPal to recognize the input.
1:01
I'll just press Space bar and
Backspace, and
1:06
you can see,
the lower test strings is highlighted.
1:09
Now we're ready to work.
1:13
I could make non-numeral characters
optional by putting question marks
1:14
after each one, like this.
1:18
Now both strings pass, but what if
the user puts two spaces instead of one?
1:28
Or spaces the parentheses out and
the hyphen?
1:36
Because the question marks match zero or
one of these specific characters,
1:42
this regex is more flexible,
but it can still break.
1:46
Instead of specifying the characters
we expect from the user,
1:50
let's let the user type
any non-numeral character.
1:53
I'll replace all of these
special characters with a \D,
1:57
which matches any non-numeral character.
2:04
To match zero or more non-numerals,
replace the question marks with asterisks.
2:14
[BLANK AUDIO] I can get
rid of one of these
2:19
non-numeral characters since I'm using
2:25
an asterisk to match any repetition.
2:30
I'll also put a \D at the end to
match trailing spaces, for example.
2:36
All of our test strings pass now.
2:44
I'll copy this regex and paste it into our
code, replacing what I had there before.
2:46
When you're pasting in, remember not
to replace the first or the last slash.
2:53
As those are characters that JavaScript
uses to know this is a regular expression
2:58
and not really part of
the regular expression, itself.
3:03
Let's go look and see what we get.
3:07
I've gotta refresh.
3:15
Great, works, now that we've relaxed the
rules of what we'll accept from the user,
3:20
let's use JavaScript's replace method
to reformat the telephone number.
3:25