Every web developer knows the feeling: you've built a form, and you let out a groan as you realize that now you have to validate each field.

Thankfully, form validation doesn't have to be painful. You can use regular expressions to handle many common validation needs.

What Are Regular Expressions?

Regular expressions describe patterns that match combinations of characters in strings. You can use them to represent concepts like “only numbers” or ”exactly five uppercase letters”.

Regular expressions (also called regex) are powerful tools. They have many uses, including advanced search, find-and-replace, and validation operations on strings. One famous application of regular expressions is the grep command in Linux.

Why Use Regular Expressions for Validation?

There are many ways to validate form input, but regular expressions are simple, fast, and convenient to use if you understand how.

JavaScript has native support for regular expressions. This means using them for validation as opposed to an external library helps keep the size of your web application as small as possible.

Regular expressions are also capable of validating many types of form input.

Basics of Regular Expressions

Regular expressions consist of symbols that describe patterns formed by characters in a string. In JavaScript, you can create a regular expression literal by writing it between two forward slashes. The simplest form of a regular expression looks like this:

        /abc/
    

The above regular expression will match any string that includes the characters "a", "b", and "c" in that order, consecutively. The string "abc" will match that regular expression, as well as a string like "abcdef".

You can describe more advanced patterns by using special characters in your regular expressions. Special characters don't represent a literal character, but they make your regex more expressive.

You can use them to specify that a part of the pattern should repeat a certain number of times, or to indicate that some of the pattern is optional.

An example of a special character is "*". The "*" character modifies either a single character, or a group of characters, that come before it. It declares that those characters may be absent or may repeat themselves any number of times in a row. For example:

        /abc*/

Will match "ab" followed by any number of "c" characters. The string "ab" is a valid example of that pattern, because the character "c" is optional. The strings "abc" and "abccccc" are equally valid, because the "*" means that "c" can repeat any number of times.

The full regex syntax uses several more pattern characters to describe possible matches. You can learn more from regexlearn.com’s Regex 101 interactive course. MDN’s JavaScript guide is also very useful.

Form Validation With Regular Expressions

You can use regex to validate form input in a couple of ways. The first way is to use JavaScript. It involves a few steps:

  1. Get the value of the form input.
  2. Check if the value of the input matches the regular expression.
  3. If it doesn't, display to the user of the website that the value of the input field is invalid.

Here's a short example. Given an input field like this:

        <input placeholder="Input field">
    

You can write a function to validate it like this:

        function validate() {
    let value = document.querySelector("input").value;
    const regEx = /^.{3,7}$/;
    return regEx.test(value);
}

Another way is to take advantage of the browser's HTML form validation capabilities. How? By specifying regex as the value of the pattern attribute of the HTML input tag.

The pattern attribute is only valid for the following types of input: text, tel, email, url, password, and search.

Here's an example using the pattern attribute:

        <form>
    <input placeholder="Input field" required pattern="/^.{3,7}$/">
    <button>Submit</button>
</form>

If you submit the form and the input's value doesn't match the entire regex, the form will display a default error that looks like this:

an input field with an error

If the regular expression supplied to the pattern attribute is invalid, the browser will ignore the attribute.

Common Regex Patterns for Form Validation

Having to construct and debug regex from scratch can take some time. Here are some regex statements that you can use to validate some of the most common types of form data.

Regular Expression to Validate String Length

One of the most common validation requirements is a restriction on the length of a string. The regular expression that will match a seven-character string is:

        /^.{7}$/
    

The "." is a placeholder that matches any character, and the "7" in curly brackets specifies the length limit of the string. If the string needed to be within a certain range of length, like between three and seven, the regular expression would look like this instead:

        /^.{3,7}$/
    

And if the string needed to be at least three characters long with no upper limit, it would look like this:

        /^.{3,}$/
    

It's unlikely that length will be the only validation requirement for a form input. But you'll often use it as part of a more complicated regular expression including other conditions.

Regular Expression to Validate Letter-Only Fields

Some form inputs need to contain nothing but letters to be valid. The following regular expression will only match such strings:

        /^[a-zA-Z]+$/
    

This regular expression specifies a character set made up of the whole alphabet. The special character "+" means the preceding character must occur at least once, with no upper limit.

Regular Expression to Validate Number-Only Fields

The following regular expression will only match strings made up entirely of digits:

        /^\d+$/
    

The above regular expression is essentially the same as the prior one. The only difference is that it uses a special character "\d" to represent the range of digits, instead of writing them out.

Regular Expression to Validate Alphanumeric Fields

Regular expressions make it easy to validate alphanumeric fields too. Here's a regular expression that will only match strings made up of letters and digits:

        /^[a-zA-Z\d]+$/
    

Some fields are alphanumeric, but allow a few other characters like hyphens and underscores. One example of such fields is a username. Below is a regular expression that matches a string made up of letters, digits, underscores, and hyphens:

        /^(\w|-)+$/
    

The special character "\w" matches an entire class of characters, like "\d" does. It represents the range of the alphabet, digits, and the underscore character ("_").

Regular Expression to Validate Phone Numbers

A phone number can be a complicated field to validate because different countries use different formats. A very general approach is to ensure that the string contains only digits and that its length is within a certain range:

        /^\d{9,15}$/
    

A more sophisticated approach might look like this one taken from MDN, which validates phone numbers in the format ###-###-####:

        /^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/
    

Regular Expression to Validate Dates

Like phone numbers, dates can also have multiple formats. Dates are usually less complicated to validate than phone numbers. Why? Dates contain no characters other than digits and hyphens.

Here's an example that will validate dates of the "DD-MM-YYYY" format.

        /^\d{2}-\d{2}-\d{4}$/
    

Validating With Regex Is Easy

Regular expressions describe patterns that match combinations of characters in strings. They have a variety of applications, such as validating user input from HTML forms.

You can use regex to validate with JavaScript or via the HTML pattern attribute. It's easy to construct regular expressions to validate common types of form inputs like dates and usernames.