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

  1. Regex Username Validation
  2. Regex Email Address Validation
  3. Regex Date Validation
  4. Regex Strong password validation
  5. Regex URL link validation
  6. 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:

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:

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:

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:

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:

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:

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