In this article I will explain with an example, how to allow only AlphaNumeric (Letters or Numbers), Underscore in Username and it must have length of 3 to 10 characters using JavaScript.
When the Submit Button is clicked, the Username in the TextBox will be validated using JavaScript and Regular Expression (Regex) and if the Username is invalid, the error message will be displayed next to the TextBox using JavaScript.
 
 
HTML Markup
The following HTML Markup consists of an HTML TextBox, SPAN element and a Button. The Button has been assigned an OnClick event handler which calls the ValidateUsername JavaScript function.
<input type="text" id="txtUsername" />
<br />
<span id="lblError" style="color: red"></span>
<br />
<br />
<input type="button" id="btnValidate" value="Submit" onclick="ValidateUsername()" />
 
 
JavaScript function to allow only AlphaNumeric and Underscore in Username and must contain 3 to 10 characters
When the Submit Button is clicked, the Username in the TextBox will be validated using JavaScript and Regular Expression (Regex) and if the Username is invalid, the error message will be displayed next to the TextBox using JavaScript.
<script type="text/javascript">
    function ValidateUsername() {
        var username = document.getElementById("txtUsername").value;
        var lblError = document.getElementById("lblError");
        lblError.innerHTML = "";
        var expr = /^[a-zA-Z0-9_]{3,10}$/;
        if (!expr.test(username)) {
            lblError.innerHTML = "Only Alphabets, Numbers and Underscore and between 3 to 10 characters.";
        }
    }
</script>
 
 
Screenshot
Username: AlphaNumeric (Letters or Numbers), Underscore and must contain 3 to 10 characters in JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads
Download Code