HTML5 Patterns for phone numbers

Jul 05, 2013 code

So I was searching for a quick regular expression for phone numbers that would include a variety of input styles. Basically giving the flexibility of the user to have just spaces between numbers, a dash sign, and even parentheses. I couldn’t find any simple solutions so figured I would hopefully rank to give others a simple solution.

For the below we have 555 555 5555, (555) 555-5555, 555-5555-5555

The pattern is giving 0-9 as well as () then we have the space and – after between the | symbol. I am sure there are other ways to write this but I found this the easiest to read and makes the most sense to me.

<input type="text" name="phone" value="" required pattern="([0-9()]| |-)+" />