JS REGEX 02: Using Regular Expressions (RegEx) for Form Validation in Web Development

In web development, form validation is one of the most important tasks you’ll ever handle. Before a user’s information can be submitted, you often need to make sure they’ve entered it in the right format — whether it’s an email address, phone number, or password.

Instead of writing long chains of if statements or checking strings one piece at a time, developers rely on Regular Expressions (RegEx) — a short, powerful way to search, match, and validate text according to well-defined patterns.

In this lesson, we’ll learn how to use RegEx to validate three common input types: Email, Nigerian Phone Numbers, and Passwords.

📧 Validating Email Addresses

Email validation is one of the most common uses of RegEx. A typical email address follows this format:

username@domain.extension

It has four key parts:

A username (letters, numbers, or symbols like _ or .)
The @ symbol separating the username from the domain
A domain name
A top-level domain like .com, .org, or .ng

Here’s the RegEx pattern used to validate an email:

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

Let’s break it down:

The ^ symbol marks the start of the string.
[a-zA-Z0-9._%+-]+ allows letters, numbers, and some special symbols before the @.
The @ ensures that symbol is present.
[a-zA-Z0-9.-]+ captures the domain part (like gmail or yahoo).
The \.[a-zA-Z]{2,}$ checks that the extension (like .com or .ng) has at least two letters.
And finally, $ marks the end of the string.

So, me@gmail.com or user@site.ng would both be valid, while something like myemail or user@site would not. This pattern ensures that only properly structured email addresses pass your validation.

☎️ Validating Nigerian Phone Numbers

Now, let’s look at Nigerian phone numbers. They usually start with specific prefixes and must contain exactly 11 digits. The common prefixes include: 070, 080, 081, 090, and 091.

The RegEx pattern for that looks like this:

^(070|080|081|090|091)\d{8}$

Here’s what happens step-by-step:

The ^ again marks the beginning of the string.
The group (070|080|081|090|091) ensures the number starts with one of the approved Nigerian prefixes.
\d{8} means there must be exactly eight digits after that prefix.
The $ marks the end of the number, confirming it stops right after those 11 digits.

So, a number like 08012345678 or 09187654321 passes validation perfectly. But 0811234567 (missing one digit) or 0145678901 (invalid prefix) would fail immediately.

This simple RegEx keeps your form from accepting fake or wrongly formatted Nigerian mobile numbers.

🔐 Validating Password Strength

Next, let’s talk about password validation — something every serious web application must handle. A strong password should have at least:

One lowercase letter
One uppercase letter
One number
One special character (such as @, $, !, %, *, ?, or &)
And it should be at least 8 characters long.

Here’s a powerful RegEx pattern for that:

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$

Now let’s explain the magic:

(?=.*[a-z]) ensures there’s at least one lowercase letter.
(?=.*[A-Z]) ensures there’s at least one uppercase letter.
(?=.*\d) ensures at least one number.
(?=.*[@$!%*?&]) ensures there’s at least one special character.
[A-Za-z\d@$!%*?&]{8,} finally checks that the total length is eight characters or more.

So, Pa$$w0rd! passes with flying colors. But something like Pass123 (too short) or password (no number or uppercase) would fail.

This pattern helps you enforce password strength effortlessly — no long condition chains needed.

💡 Why Use RegEx for Validation?

You could validate inputs with several if statements, but that quickly becomes messy and hard to maintain.

For example, you might write:

if (!email.includes("@")) { ... }
if (phone.length !== 11) { ... }
if (!passwordHasNumber) { ... }

That’s fine for very basic checks, but it can get confusing when your logic grows. RegEx, on the other hand, lets you handle all of that in one clean line of code per field:

emailPattern.test(email);
phonePattern.test(phone);
passwordPattern.test(password);

It’s shorter, cleaner, and much easier to adjust later. You can instantly see what the pattern checks for and expand it without cluttering your code.

🧠 Quick Recap

Let’s recap the patterns we used:

Email: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ Checks for the general format username@domain.extension.
Nigerian Phone Number: ^(070|080|081|090|091)\d{8}$ Ensures it starts with a valid prefix and contains 11 digits.
Password: ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$ Confirms the password is strong and secure.

With these three patterns, you can handle most validation tasks for sign-up forms, login pages, and online registrations like a pro.

🧩 Review Questions

Let’s put your understanding to the test! Fill in the blanks or choose the correct answer below.

Which RegEx pattern correctly validates a Nigerian phone number that starts with 081 and is 11 digits long? A) ^081\d{8}$ B) ^081\d{7}$ C) ^08\d{9}$ D) ^\d{11}$
What does this RegEx match?
```
^[a-zA-Z]+$
```
A) Only numbers B) Only lowercase letters C) Only alphabetic characters (uppercase and lowercase) D) Any characters including special ones
Which of these passwords will pass the RegEx below?
```
^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$
```
A) password123 B) Pass1234 C) Pa$$w0rd D) admin@123
True or False: The RegEx
```
^[a-zA-Z0-9._%+-]+@[a-z]+\.[a-z]{2,}$
```
will correctly match the email user@mail.com.ng.
Write a RegEx to validate a Nigerian postal code (6-digit number). (Hint: Start with ^ and end with $.)
The RegEx symbol \d is used to match any ___.
In the pattern ^[a-zA-Z0-9._%+-]+, the + means “match one or more ___.”
What character must every valid email contain according to our pattern?
Which flag (i, m, g, u, or y) is used to ignore uppercase and lowercase differences when searching text?
Give an example of a valid Nigerian phone number that matches the pattern ^(090|080|081|091|070)\d{8}$.

JS REGEX 01: Understanding Regex Flags in JavaScript

🎯 How to Set a Facebook Preview Image for Your Website