JS REGEX 02: Validating User Inputs with Regular Expressions in Web Forms
Once upon a time in the world of web development, a young developer was tasked with building a sign-up form for users in Nigeria. It looked simple — just fields for Email, Phone Number, and Password — but there was a hidden challenge: how do you make sure users enter the right kind of data?
That’s when our hero discovered a magical tool called RegEx (Regular Expression) — a compact yet powerful language used to search, match, and validate text.
Think of RegEx as a smart filter that checks if a piece of text follows a specific rule. It doesn’t just look at the surface; it analyzes patterns and says either ✅ “This fits!” or ❌ “No, that’s wrong.”
Let’s take a storytelling journey into how you, as a developer, can wield RegEx to keep your forms clean, secure, and professional.
🧠 The Mission: Data Validation in a Nigerian Sign-up Form
Imagine this — you’re building a registration form for an online platform. You need to collect:
- Email Address
- Phone Number (in Nigerian format)
- Password
Your mission? Ensure that every user provides complete, correct, and secure data before submission. Let’s explore how RegEx saves the day.
📧 1. Validating Email Addresses
Emails follow a global pattern — something like someone@example.com
. It’s structured with three main parts:
- A username before the
@
- A domain name after the
@
- A top-level domain (like
.com
,.org
, or.ng
)
✅ RegEx Pattern:
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
🧩 How It Works:
^[a-zA-Z0-9._%+-]+
→ Matches the part before the@
, allowing letters, numbers, and symbols like_
or.
@
→ Ensures there’s an @ symbol separating the name from the domain[a-zA-Z0-9.-]+
→ Matches the domain name\.[a-zA-Z]{2,}$
→ Ensures a dot followed by at least two letters for the domain extension
🧪 Examples:
Input | Result | Explanation |
---|---|---|
myemail |
❌ | Missing @ and domain name |
me@gmail.com |
✅ | Valid email format |
user@site.ng |
✅ | Valid .ng domain |
This RegEx ensures that users enter a properly formatted email before submitting your form.
☎️ 2. Validating Nigerian Phone Numbers
Nigerian phone numbers have a predictable format: they begin with one of a few specific prefixes (070
, 080
, 081
, 090
, or 091
) and always contain 11 digits total.
✅ RegEx Pattern:
^(070|080|081|090|091)\d{8}$
🧩 How It Works:
^
→ Start of the string(070|080|081|090|091)
→ Accepts any of these prefixes\d{8}
→ Requires exactly 8 digits after the prefix$
→ End of the string
🧪 Examples:
Input | Result | Explanation |
---|---|---|
08012345678 |
✅ | Valid Nigerian number |
0811234567 |
❌ | Only 10 digits, one missing |
09187654321 |
✅ | Valid and complete |
0145678901 |
❌ | Invalid prefix (01 not allowed) |
This pattern ensures your platform accepts only authentic Nigerian numbers.
🔐 3. Validating Password Strength
Passwords are like castle gates — they must be strong enough to keep intruders out. Your rules are:
- At least 8 characters long
- Must contain uppercase and lowercase letters
- Must include a number
- Must have a special symbol like
@, $, !, %, *, ?, &
✅ RegEx Pattern:
^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$
🧩 How It Works:
(?=.*[a-z])
→ At least one lowercase letter(?=.*[A-Z])
→ At least one uppercase letter(?=.*\d)
→ At least one digit(?=.*[@$!%*?&])
→ At least one special character{8,}
→ Minimum length of 8 characters
🧪 Examples:
Input | Valid? | Why |
---|---|---|
password |
❌ | Weak — no numbers or symbols |
Pass123 |
❌ | Too short (less than 8) |
Pa$$w0rd! |
✅ | Strong and meets all rules |
With this pattern, you can instantly verify password strength and reject weak submissions.
💡 Why Use RegEx Instead of Long if
Statements?
Sure, you could write a dozen if
conditions like:
if (!email.includes("@")) { ... }
if (phone.length !== 11) { ... }
if (!passwordHasNumber) { ... }
But that gets messy and hard to maintain.
RegEx compresses all those rules into one elegant line, making your validation cleaner, faster, and more professional.
It’s like using one magic spell instead of twenty tiny checks.
📊 Summary Table
Field | Purpose | Example RegEx | ||||
---|---|---|---|---|---|---|
Ensures proper email format | ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ |
|||||
Phone Number | Validates 11-digit Nigerian numbers | ^(070 | 080 | 081 | 090 | 091)\d{8}$ |
||||
Password | Enforces strong password rules | ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$ |
RegEx doesn’t just save time — it makes your forms smarter and your users safer.
🧩 Review Fill-Gap and Multiple Choice Questions
Let’s test your mastery of RegEx validation.
1. 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}$
2. What will the following 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
3. Which of these passwords will pass the RegEx validation for strength?
^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$
A) password123
B) Pass1234
C) Pa$$w0rd
D) admin@123
4. True or False: A RegEx pattern like
^[a-zA-Z0-9._%+-]+@[a-z]+\.[a-z]{2,}$
will correctly match the email user@mail.com.ng
.
5. Write a RegEx to validate a Nigerian postal code (6-digit number).
(Hint: Start with ^
and end with $
)
6. The RegEx symbol \d
is used to match any ___.
7. In the pattern ^[a-zA-Z0-9._%+-]+
, the +
means “match one or more ___.”
8. What character must every valid email contain according to our pattern?
9. Which flag (i
, m
, g
, u
, or y
) would you use to ignore uppercase and lowercase differences when searching text?
10. Give an example of a valid Nigerian phone number that passes the pattern ^(090|080|081|091|070)\d{8}$
.