Skip to content
-
JavaScript - Username Validation using Regex
Last Updated :
16 Jan, 2025
We are going to validate usernames in JavaScript. Username validation is a common requirement in user registration forms, ensuring that usernames meet the specific criteria
- It must start with a letter.
- Can contain letters, numbers, and underscores.
- Must be between 3 and 16 characters long.
Simple Regular Expression-Based Validation
In this approach, we are using only simple regular expressions to validate usernames.
JavaScript
function validateUsername(username) {
const pattern = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/;
return pattern.test(username);
}
//Driver Code Starts
// Test cases
console.log(validateUsername("user123"));
console.log(validateUsername("_user"));
console.log(validateUsername("u"));
console.log(validateUsername("user_name123"));
console.log(validateUsername("user@name"));
//Driver Code Ends
Outputtrue
false
false
true
false
In this example
- ^ : Start of the string
- [a-zA-Z] : The username must start with a letter (uppercase or lowercase).
- [a-zA-Z0-9_] : The username can contain letters, numbers, and underscores.
- {2,15} : The username must be between 3 and 16 characters long (since the first character is already matched, we use {2,15} for the remaining length).
- $ : End
Combined Logic for More Customization
In some cases, using only regular expressions might not be enough, especially if you have more complex validation rules.
JavaScript
function validateUsername(username) {
if (username.length < 3) {
return "Username is too short.";
}
if (username.length > 16) {
return "Username is too long.";
}
// Regex to check valid characters: letters, numbers, dots, underscores
const pattern = /^[a-zA-Z0-9._]+$/;
if (!pattern.test(username)) {
return "Username contains invalid characters. Only letters, numbers, dots, and underscores are allowed.";
}
// Check that it doesn't start or end with a dot or underscore
if (username.startsWith('.') || username.startsWith('_')) {
return "Username cannot start with a dot or underscore.";
}
if (username.endsWith('.') || username.endsWith('_')) {
return "Username cannot end with a dot or underscore.";
}
return "Valid username.";
}
//Driver Code Starts
console.log(validateUsername("user.name"));
console.log(validateUsername(".username"));
console.log(validateUsername("username_"));
console.log(validateUsername("us"));
console.log(validateUsername("a_very_long_username_example"));
console.log(validateUsername("valid_user123"));
console.log(validateUsername("invalid#name"));
//Driver Code Ends
OutputValid username.
Username cannot start with a dot or underscore.
Username cannot end with a dot or underscore.
Username is too short.
Username is too long.
Valid username.
Username contains invalid cha...
`;
$(commentSectionTemplate).insertBefore(".article--recommended");
}
loadComments();
});
});
function loadComments() {
if ($("iframe[id*='discuss-iframe']").length top_of_element && top_of_screen articleRecommendedTop && top_of_screen articleRecommendedBottom)) {
if (!isfollowingApiCall) {
isfollowingApiCall = true;
setTimeout(function(){
if (loginData && loginData.isLoggedIn) {
if (loginData.userName !== $('#followAuthor').val()) {
is_following();
} else {
$('.profileCard-profile-picture').css('background-color', '#E7E7E7');
}
} else {
$('.follow-btn').removeClass('hideIt');
}
}, 3000);
}
}
});
}
$(".accordion-header").click(function() {
var arrowIcon = $(this).find('.bottom-arrow-icon');
arrowIcon.toggleClass('rotate180');
});
});
window.isReportArticle = false;
function report_article(){
if (!loginData || !loginData.isLoggedIn) {
const loginModalButton = $('.login-modal-btn')
if (loginModalButton.length) {
loginModalButton.click();
}
return;
}
if(!window.isReportArticle){
//to add loader
$('.report-loader').addClass('spinner');
jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', {
PRACTICE_API_URL: practiceAPIURL,
PRACTICE_URL:practiceURL
},function(responseTxt, statusTxt, xhr){
if(statusTxt == "error"){
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
}else{
window.scrollTo({ top: 0, behavior: 'smooth' });
$("#report_modal_content").show();
}
}
function closeShareModal() {
const shareOption = document.querySelector('[data-gfg-action="share-article"]');
shareOption.classList.remove("hover_share_menu");
let shareModal = document.querySelector(".hover__share-modal-container");
shareModal && shareModal.remove();
}
function openShareModal() {
closeShareModal(); // Remove existing modal if any
let shareModal = document.querySelector(".three_dot_dropdown_share");
shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" }));
document.querySelector(".hover__share-modal-container").append(
Object.assign(document.createElement('div'), { className: "share__modal" }),
);
document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" }));
const socialOptions = ["LinkedIn", "WhatsApp","Twitter", "Copy Link"];
socialOptions.forEach((socialOption) => {
const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" });
const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` });
const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` });
const shareLink = (socialOption === "Copy Link") ?
Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) :
Object.assign(document.createElement('a'), { className: "link-container" });
if (socialOption === "LinkedIn") {
shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`);
shareLink.setAttribute('target', '_blank');
}
if (socialOption === "WhatsApp") {
shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
if (socialOption === "Twitter") {
shareLink.setAttribute('href', `https://twitter.com/intent/tweet?url=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
shareLink.append(icon, socialText);
socialContainer.append(shareLink);
document.querySelector(".share__modal").appendChild(socialContainer);
//adding copy url functionality
if(socialOption === "Copy Link") {
shareLink.addEventListener("click", function() {
var tempInput = document.createElement("input");
tempInput.value = window.location.href;
document.body.appendChild(tempInput);
tempInput.select();
tempInput.setSelectionRange(0, 99999); // For mobile devices
document.execCommand('copy');
document.body.removeChild(tempInput);
this.querySelector(".share__option-text").textContent = "Copied"
})
}
});
// document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu"));
}
function toggleLikeElementVisibility(selector, show) {
document.querySelector(`.${selector}`).style.display = show ? "block" : "none";
}
function closeKebabMenu(){
document.getElementById("myDropdown").classList.toggle("show");
}