JavaScript & PHP Regex Validation – Username, Email, Password & More

Regular expressions (Regex) are essential for validating user input in both JavaScript and PHP. Whether you are handling form submissions on the client-side or server-side, Regex ensures data is formatted correctly and meets specific requirements.

This page provides JavaScript and PHP functions for common validation tasks using Regex, including:

Username Validation – Ensures valid usernames with specific character rules.
Email Address Validation – Checks for properly formatted email addresses.
Date Validation – Confirms correct date formats (YYYY-MM-DD, MM/DD/YYYY, etc.).
Strong Password Validation – Requires uppercase, lowercase, numbers, and special characters.
URL Link Validation – Ensures valid website URLs with http or https.
Mobile Number Validation – Checks for valid phone number formats based on country codes.

Test the live demo to validate different inputs instantly.

Contents

Regex Username Validation
Regex Email Address Validation
Regex Date Validation
Regex Strong password validation
Regex URL link validation
Regex Mobile Number validation

Username validation

Username validation regex JavaScript code (Starts with a lowercase letter, Can contain lowercase letters, numbers, and underscores, Length: 5 to 20 characters) and demo:

Demo:

username

starting with[a-z0-9_] letters only. min-max 5-20

JavaScript function username validation:

JavaScript

const validateUsername = (username) => {
	/**
	* Validates a username based on the following criteria:
	* - Starts with a lowercase letter.
	* - Can contain lowercase letters, numbers, and underscores.
	* - Length: 5 to 20 characters.
	*/
	const regex = /^[a-z][a-z0-9_]{4,19}$/i;
	return regex.test(username);
};

HTML usage

<label for="username">username</label>
<input id="username" type="text">
<span id="username-valid-message" style="display: block;color: red"></span>

<script>
document.getElementById("username").addEventListener("change", function() {
    let username = this.value;
    let message = document.getElementById("username-valid-message");
    if (validateUsername(username)) {
        message.innerText = '';
    } else {
        message.innerText = 'Invalid username. Allowed: a-z, 0-9, _, Length: 5-20';
    }
});
</script>

Try it yourself

PHP function username validation:

PHP

<?php
function validateUsername($username) {
    return preg_match('/^[a-z][a-z0-9_]{4,19}$/i', $username);
}

Email validation

Email validation regex JavaScript and PHP code with demo:

Demo:

JavaScript function email validation:

JavaScript

const validateEmail = (email) => {
    // Allows lowercase, uppercase, numbers, and common special characters.
    const regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}$/i;
    return regex.test(email);
};

HTML usage

<label for="email">Email</label>
<input id="email" type="text">
<span id="email-valid-message" style="display: block;color: red"></span>

<script>
document.getElementById("email").addEventListener("change", function() {
    let email = this.value;
    let message = document.getElementById("email-valid-message");
    if (validateEmail(email)) {
        message.innerText = '';
    } else {
        message.innerText = 'Invalid Email Address';
    }
});
</script>

Try it yourself

PHP function email validation:

PHP

<?php
function validateEmail($email) {
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        return false;
    }
}

Date validation

Date validation regex function JavaScript and PHP code with demo:

Demo:

Date

JavaScript function date validation:

JavaScript

const validateDate = (date, format = "dd-mm-yyyy") => {
    /**
     * Validates a date based on format:
     * - "yyyy-mm-dd" (ISO format)
     * - "dd-mm-yyyy" (Common format)
     *
     * Ensures correct format and checks if the date actually exists.
     */
    let regex, day, month, year;

    if (format === "yyyy-mm-dd") {
        regex = /^([1-9]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
        const match = date.match(regex);
        if (!match) return false;
        [year, month, day] = match.slice(1);
    } else if (format === "dd-mm-yyyy") {
        regex = /^(0[1-9]|[12]\d|3[01])-(0[1-9]|1[0-2])-([1-9]\d{3})$/;
        const match = date.match(regex);
        if (!match) return false;
        [day, month, year] = match.slice(1);
    } else {
        return false; // Unsupported format
    }

    return isValidDate(parseInt(day), parseInt(month), parseInt(year));
};

// Function to check if the date is actually valid
const isValidDate = (day, month, year) => {
    const dateObj = new Date(year, month - 1, day);
    return dateObj.getFullYear() === year && 
           dateObj.getMonth() === month - 1 &&
           dateObj.getDate() === day;
};

HTML usage

<label for="date">Date</label>
<input id="date" type="text">
<span id="date-valid-message" style="display: block;color: red"></span>

<script>
document.getElementById("date").addEventListener("change", function() {
    let date = this.value;
    let message = document.getElementById("date-valid-message");
    if (validateDate(date, "dd-mm-yyyy")) {
        message.innerText = '';
    } else {
        message.innerText = 'Invalid Date (dd-mm-yyyy)';
    }
});
</script>

Try it yourself

PHP function date validation:

PHP

<?php
function validateDate($date, $format = "dd-mm-yyyy") {
    if ($format === "yyyy-mm-dd") {
        $regex = "/^([1-9]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/";
        if (!preg_match($regex, $date, $matches)) {
            return false;
        }
        list(, $year, $month, $day) = $matches;
    } elseif ($format === "dd-mm-yyyy") {
        $regex = "/^(0[1-9]|[12]\d|3[01])-(0[1-9]|1[0-2])-([1-9]\d{3})$/";
        if (!preg_match($regex, $date, $matches)) {
            return false;
        }
        list(, $day, $month, $year) = $matches;
    } else {
        return false; // Unsupported format
    }

    return checkdate((int)$month, (int)$day, (int)$year);
}

// Example usage:
// validateDate("31-12-2023", "dd-mm-yyyy");

Strong Password validation

Strong password validation regex function JavaScript and PHP code with demo:

Demo:

Password

Minimum 8 charsAt least-one small letter [a-z]At least-one upper letter [A-Z]At least-one digit [0-9]At least-one special char [~!@#$%^&*(...)]

JavaScript function password validation:

JavaScript

const validatePassword = (password) => {
    // Ensure password is a string
    password = String(password);

    if (password.length < 8) {
        return "Password must be at least 8 characters long.";
    }
    if (!/[0-9]/.test(password)) {
        return "Password must contain at least one numeric digit.";
    }
    if (!/[a-z]/.test(password)) {
        return "Password must contain at least one lowercase letter.";
    }
    if (!/[A-Z]/.test(password)) {
        return "Password must contain at least one uppercase letter.";
    }
    if (!/[`~!@#$%^&*()\-_=+{}[\]:;"'<>,.?\/|\\]/.test(password)) {
        return "Password must contain at least one special character.";
    }

    return true;
};

HTML usage

<label for="password">Password</label>
<input id="password" type="text">
<span id="password-valid-message" style="display: block;color: red"></span>

<script>
document.getElementById("password").addEventListener("change", function() {
    let password = this.value;
    let message = document.getElementById("password-valid-message");
    let validate = validatePassword(password)
    if (validate === true) {
        message.innerText = '';
    } else {
        message.innerText = validate;
    }
});
</script>

Try it yourself

PHP function strong password validation:

PHP

<?php
function validatePassword($password) {
    // Ensure password is treated as a string
    $password = (string) $password;

    if (strlen($password) < 8) {
        return "Password must be at least 8 characters long.";
    }
    if (!preg_match('/[0-9]/', $password)) {
        return "Password must contain at least one numeric digit.";
    }
    if (!preg_match('/[a-z]/', $password)) {
        return "Password must contain at least one lowercase letter.";
    }
    if (!preg_match('/[A-Z]/', $password)) {
        return "Password must contain at least one uppercase letter.";
    }
    if (!preg_match('/[`~!@#$%^&*()\-_=+{}[\]:;"\'<>,.?\/|\\\\]/', $password)) {
        return "Password must contain at least one special character.";
    }

    return true;
}

// Example usage:
$password = "Test@123";
$result = validatePassword($password);
echo $result === true ? "Valid password" : $result;

URL link validation

URL link validation regex function JavaScript and PHP code with demo:

Supports http, https, and www correctly.
Ensures valid domain names and TLDs.
Allows query strings, anchors, and common URL structures.

Demo:

URL

JavaScript function URL link validation:

JavaScript

const validateURL = (url) => {
    const regex = /^(https?:\/\/(?:www\.)?|www\.)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}([\/?#].*)?$/;
    return regex.test(url);
};

HTML usage

<label for="url">URL</label>
<input id="url" type="text">
<span id="url-valid-message" style="display: block;color: red"></span>

<script>
document.getElementById("url").addEventListener("change", function() {
    let url = this.value;
    let message = document.getElementById("url-valid-message");
    if (validateURL(url)) {
        message.innerText = '';
    } else {
        message.innerText = 'Invalid URL';
    }
});
</script>

Try it yourself

PHP function URL link validation:

PHP

<?php
function validateURL($url) {
    if (!filter_var($url, FILTER_VALIDATE_URL)) {
        return false;
    }
    return true;
}

Mobile number validation

Mobile number validation validation regex function JavaScript and PHP code with demo:

Matches common formats:

(123) 456-7890
123-456-7890
123.456.7890
1234567890

Demo:

Phone

JavaScript function mobile number validation:

JavaScript

const validateMobileNumber = (number) => {
    number = String(number).trim();
    // Regex to validate various formats: (123) 456-7890, 123-456-7890, 123.456.7890, 1234567890
    const regex = /^(\(\d{3}\)|\d{3})[\-\.\s]?\d{3}[\-\.\s]?\d{4}$/;
    return regex.test(number);
};

HTML usage

<label for="phone">Phone</label>
<input id="phone" type="text">
<span id="phone-valid-message" style="display: block;color: red"></span>

<script>
document.getElementById("phone").addEventListener("change", function() {
    let phone = this.value;
    let message = document.getElementById("phone-valid-message");
    if (validateMobileNumber(phone)) {
        message.innerText = '';
    } else {
        message.innerText = 'Invalid mobile number';
    }
});
</script>

Try it yourself

PHP function mobile number validation:

PHP

<?php
function isValidMobileNumber($number) {
    // Ensure input is a string
    $number = strval($number);

    // Trim whitespace
    $number = trim($number);

    // Regex for valid formats
    $pattern = '/^(\(\d{3}\)|\d{3})[\-\.\s]?\d{3}[\-\.\s]?\d{4}$/';

    return preg_match($pattern, $number) === 1;
}

// Example usage
var_dump(isValidMobileNumber("(123) 456-7890")); // true
var_dump(isValidMobileNumber("123-456-7890")); // true
var_dump(isValidMobileNumber(1234567890)); // true
var_dump(isValidMobileNumber("invalid number")); // false

Form validation

Demo form validation code HTML and JavaScript

Demo:

username

JavaScript function form validation:

JavaScript

const validateUsername = (username) => {
    const regex = /^[a-z][a-z0-9_]{4,19}$/i;
    return regex.test(username);
};

const validateEmail = (email) => {
    const regex = /^[a-z0-9!#$%&'*+\-/=?^_`{|}~]+(?:\.[a-z0-9!#$%&'*+\-/=?^_`{|}~]+)*@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,}$/i;
    return regex.test(email);
};

const submitForm = (event) => {
    event.preventDefault();

    const username = document.querySelector('#username').value.trim();
    const email = document.querySelector('#email').value.trim();
    const usernameValidLabel = document.querySelector('#username-valid-label');
    const emailValidLabel = document.querySelector('#email-valid-label');

    usernameValidLabel.innerText = '';
    emailValidLabel.innerText = '';

    if (!validateUsername(username)) {
        usernameValidLabel.innerText = 'Invalid username: Must be 5-20 characters, start with a letter, and contain only letters, numbers, or underscores.';
        return;
    }

    if (!validateEmail(email)) {
        emailValidLabel.innerText = 'Invalid email address format.';
        return;
    }

    $.ajax({
        url: 'https://your-domain.com/contact.php',
        method: 'POST',
        dataType: 'json',
        data: {
            username: username,
            email: email
         },
        success: () => alert('Form submitted successfully!'),
        error: (xhr) => {
            console.error(`AJAX Error: ${xhr.status} - ${xhr.statusText}`);
            alert('Submission failed. Please try again.');
        }
    });
};

document.querySelector('#demo-form').addEventListener('submit', submitForm);

HTML usage

<form id="demo-form" action="">

  <label for="username">username</label>
  <div>
    <input id="username" class="input-text" type="text">
    <span id="username-valid-label" style="display: block;color: red"></span>
  </div>

  <label for="email">email</label>
  <div>
    <input id="email" class="input-text" type="text">
    <span id="email-valid-label" style="display: block;color: red"></span>
  </div>
  <br>

  <input type="submit" value="submit">
</form>

Try it yourself

Report Problem