My regex of choice is:
/^[\+]?[0-9]{0,3}\W?+[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
Valid formats:
(123) 456-7890
(123)456-7890
123-456-7890
123.456.7890
1234567890
+31636363634
075-63546725
+1 (415)-555-1212
+1 (123) 456-7890
+1 (123)456-7890
+1 123-456-7890
+1 123.456.7890
+1 1234567890
+1 075-63546725
+12 (415)-555-1212
+12 (123) 456-7890
+12 (123)456-7890
+12 123-456-7890
+12 123.456.7890
+12 1234567890
+123 075-63546725
+123 (415)-555-1212
+123 (123) 456-7890
+123 (123)456-7890
+123 123-456-7890
+123 123.456.7890
+123 1234567890
+123 075-63546725
+1(415)-555-1212
+1(123) 456-7890
+1(123)456-7890
+1123-456-7890
+1123.456.7890
+11234567890
+1075-63546725
+12(415)-555-1212
+12(123) 456-7890
+12(123)456-7890
+12123-456-7890
+12123.456.7890
+121234567890
+123075-63546725
+123(415)-555-1212
+123(123) 456-7890
+123(123)456-7890
+123123-456-7890
+123123.456.7890
+1231234567890
+123075-63546725
Answer from EeeeeK on Stack OverflowForm Field Phone Number Validation
Validating phone numbers - worth the trouble?
Phone Number Regular Expression Validation
Telephone Number Validator
Videos
My regex of choice is:
/^[\+]?[0-9]{0,3}\W?+[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im
Valid formats:
(123) 456-7890
(123)456-7890
123-456-7890
123.456.7890
1234567890
+31636363634
075-63546725
+1 (415)-555-1212
+1 (123) 456-7890
+1 (123)456-7890
+1 123-456-7890
+1 123.456.7890
+1 1234567890
+1 075-63546725
+12 (415)-555-1212
+12 (123) 456-7890
+12 (123)456-7890
+12 123-456-7890
+12 123.456.7890
+12 1234567890
+123 075-63546725
+123 (415)-555-1212
+123 (123) 456-7890
+123 (123)456-7890
+123 123-456-7890
+123 123.456.7890
+123 1234567890
+123 075-63546725
+1(415)-555-1212
+1(123) 456-7890
+1(123)456-7890
+1123-456-7890
+1123.456.7890
+11234567890
+1075-63546725
+12(415)-555-1212
+12(123) 456-7890
+12(123)456-7890
+12123-456-7890
+12123.456.7890
+121234567890
+123075-63546725
+123(415)-555-1212
+123(123) 456-7890
+123(123)456-7890
+123123-456-7890
+123123.456.7890
+1231234567890
+123075-63546725
First off, your format validator is obviously only appropriate for NANP (country code +1) numbers. Will your application be used by someone with a phone number from outside North America? If so, you don't want to prevent those people from entering a perfectly valid [international] number.
Secondly, your validation is incorrect. NANP numbers take the form NXX NXX XXXX where N is a digit 2-9 and X is a digit 0-9. Additionally, area codes and exchanges may not take the form N11 (end with two ones) to avoid confusion with special services except numbers in a non-geographic area code (800, 888, 877, 866, 855, 900) may have a N11 exchange.
So, your regex will pass the number (123) 123 4566 even though that is not a valid phone number. You can fix that by replacing \d{3} with [2-9]{1}\d{2}.
Finally, I get the feeling you're validating user input in a web browser. Remember that client-side validation is only a convenience you provide to the user; you still need to validate all input (again) on the server.
TL;DR don't use a regular expression to validate complex real-world data like phone numbers or URLs. Use a specialized library.
» npm install libphonenumber-js
» npm install @devmehq/phone-number-validator-js
I read a comment the other day that said phone number validation wasn’t worthwhile since it’s a moving target, and I thought it was an interesting opinion. What do you think? Is phone number validation worth it or a waste?
Edit: thank you all for the informed and thoughtful discussion. :)
So initially I had a single, big box to accept a 10-digit phone number. This is a Philippine phone number btw.
Initially I had built this input-mask with keycodes and it used a text input type, so I could block anything except digits and also detect backspace, del key, etc... Then I found out this doesn't work for mobile.
So now I've decided to use three separate boxes. This seems easier as I don't have to do the character counting where I would add dashes after the 3rd and 7th character.
What I'm thinking is using a timeout, it would check to see if there are three digits in the first box, why not use input-type text where you can have maxlength? I'm not preventing non-number characters from being entered.
So, a person could paste a huge string into the number-input field, even after setting a range. Also I hid the up/down arrows. I would bind a paste detection on the cells and it would check to make sure that the specific box didn't have more characters than it allowed and that they were all numbers or throw an error.
Also I found out that my counting was off by one. When you type something into the field, it triggers the count on keydown (should have used key up) so even though there's a character in there, it would think that there was no characters yet. Next time it would be 1 when it should be 2.
edit: I'm also not sure if I'd implement auto-tab.
This seems like a simple thing that I've somehow overblown.