This article will describe the procedure to validate the username using regex in JavaScript.
How to Validate Username Using JavaScript Regex?
To validate the username, first, create a regular expression that will determine whether the user input value matches the given pattern. Then, utilize the “test()” method for verification of the user input according to the pattern.
Follow the given pattern for taking input that contains only letters, numbers, and both, but does not allow to enter of any special character:
The given pattern will allow only letters with numbers, and it does not allow to enter only numbers, letters, and special characters in input:
Bonus tip: You can also specify the length of the username in your pattern.
Use the given syntax for the “test()” method to verify the input according to the regex pattern:
Example 1: Username Contains Only Numbers, Letters, and Both Special Characters are Not Allowed
First, create a form in an HTML document using the <form> tag that contains an input field and a submit button. Attach an “onclick” event with the button that will call the “validateUserName()” function on the button’s click:
<label>UserName:</label>
<input type="text" name="name" id="input" autocomplete="off"/><br><br>
<button type="submit" onclick="validateUserName()">Submit</button>
</form>
In the <script> tag, we will define a function named “validateUserName()” that will trigger on the button’s click:
{
var inputValue = document.getElementById("input").value;
var regexPattern = /^[a-zA-Z0-9]+$/;
if(regexPattern.test(inputValue))
{
alert("UserName is Valid");
return true;
}
else
{
alert("Enter a Valid UserName");
return false;
}
}
In the above-defined function:
- First, get the reference of the input field using the “document.getElementById()” method and then retrieve the user input value with the help of the “value” attribute.
- Define a pattern for validating the username.
- Then, utilize the “text()” method with a pattern and take input as an argument to verify whether the input is according to the regex or not.
- If the input value is equivalent to the pattern then, the alert message “UserName is Valid” is shown, otherwise, the alert box displays the “Enter a Valid UserName” message:
Output
Example 2: Username Contains Letters With Numbers, Only Numbers or Only Letters are Not Allowed
In this example, we will use the regex for taking input that contains letters with numbers, only digits, letters, or special characters with letters or numbers are not allowed. For this we will use the given pattern in the “validateUserName()” function:
The output shows that when the user enters only digits, letters, or username with a letter, number, and special character, an alert message “Enter a Valid UserName” is shown. While entering input that contains both letters and numbers, it gives a message “UserName is Valid”:
That’s all about the username validation in JavaScript using regex.
Conclusion
To validate the username, use the regular expression or regex pattern according to your requirements. Here, in this article we discussed two patterns; “/^[a-zA-Z0-9]+$/;” and “/^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$/;”. The first pattern takes input with only letters, numbers, and both, but it does not allow entering any special character. While the second pattern does not allow entering only letters and digits as a username. For validating input according to the pattern, the “test()” method is utilized. This article described the procedure to validate the username using regex in JavaScript.
