Validate Phone Number with JavaScript

javascript

regex

validation

input-masking

byAlex Kataev·Dec 16, 2024

We're using JavaScript regex for phone number validation:

function isValidPhone(phone) {
  // Phone operator: "Is this a correct phone number? This regex is on the case!"
  return /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(phone);
}

// Detective: "Well, is it or is it not? Let's find out!"
console.log(isValidPhone("123-456-7890")); // true or false

This isValidPhone function is like our friendly operator, asking all the questions and making sure numbers fit our common US format. You can modify the regex to match your case's pattern needs.

All-format Inclusive Regex

Different phone number forms like to party in many ways. Crafting our regular expression (regex) to match this party is what we will discuss here. It should make room to accommodate optional country codes, spaces, parentheses, and different separators. Roll out the regex carpet for our party guests:

function validatePhoneNumber(input) {
  // Regex Party Planner: "This party takes all kinds! Look, there goes "+123.456.7890"!"
  const regex = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
  return regex.test(input);
}

// "Who's in the party tonight?"
console.log(validatePhoneNumber("(123) 456-7890")); // true
console.log(validatePhoneNumber("123.456.7890"));   // true
console.log(validatePhoneNumber("+31636363634"));   // true

Welcoming different formats

This regex does the cha-cha with various separators like spaces ( ), hyphens (-), and dots (.), keeping the party fun and varied. We've also included the country code prefix (+) to make our party international. Remember, double-validation on the server-side is the chaperone of our validation brinkmanship.

Building a user-friendly phone hub

Building a user-friendly interface for users to input their phone numbers is akin to scripting a smooth dialogue in a movie. It should be intuitive, forgiving, and guiding. Employing an input mask or letting users choose their preferred phone format can significantly improve the user experience.

<!-- "Dial 'M' for validation!" -->
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">

International appeal: Casting an inclusive regex net

An inclusive regex is like a romantic comedy star: it appeals to everyone, and is always smoothly responsive. The libphonenumber-js library by Google is like our superstar here. Also, special services numbers shouldn't become surprise plots. A well-crafted UI keeps the user engaged, asking for details, and guiding them in their journey.

Pre-format phone numbers: Directing a well-ordered scene

Just like maintaining continuity in film shots, maintaining data consistency in your database is crucial. Formatting the data before saving it onto your database ensures all data is standardized and directed well.

Layered validation: The double security

Just like a movie plot has twists, phone number validation has multiple layers. Client-side validation is your first plot twist, catching errors quickly and minimizing server load. However, we still need that server-side validation for the final plot resolution.

explain-codes / Javascript / Validate Phone Number with JavaScript

Linked

Removing All Non-Numeric Characters from a String in JavaScript



Why does the HTML input with type "number" allow the letter 'e' to be entered in the field?



Using regular expressions to extract a value in Java



How to read line by line of a text area HTML tag



How can I extract a number from a string in JavaScript?

