Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained the implementation about how to allow only AlphaNumeric (Letters or Numbers), Underscore ( _ ) in Username with the maximum length of 5 to 12 characters by using JavaScript.
Join our Channel on Whtsapp and Telagram for All Updates
When user will click on the Submit Button after entering the Username in the TextBox, it will be validate using JavaScript and Regular Expression (Regex) and if the Username is invalid or user enter username against the given condition, the error message will be displayed on the screen using JavaScript.
Code for HTML Page
Implementation:On HTML page there will be three controls one is Textbox with the id named txt_username for entering Text by the user. Second control will be span with the id named lbl_error to display the error message on the screen if user will be enter the invalid username. Other control will be Button with the id named btn_validate. On the OnClick event handler of the Button, I will call function named ValidateUsername().
Button
The Button has been assigned an OnClick event handler which calls the validate_username JavaScript function.
<input type="text" id="txt_username" />
<br />
<span id="lbl_error" style="color:red"></span>
<br />
<br />
<input type="button" id="btn_validate" value="Submit" onclick="validate_username()" />
JavaScript function to allow only AlphaNumeric and Underscore in Username and must contain 5 to 12 characters
When user click on the Submit Button after entering the username in the mentioned TextBox, then 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 validate_username() {
var username = document.getElementById("txt_username").value;
var lblError = document.getElementById("lbl_error");
lblError.innerHTML = "";
var expr = /^[a-zA-Z0-9_]{3,12}$/;
if (!expr.test(username)) {
lblError.innerHTML = "Only Alphabets, Numbers and Underscore and between 5 to 12 characters.";
}
}
</script>
Here I am giving complete code for HTML page with JavaScript functions as well as controls. You need to copy and paste the code in your HTML page for enjoying the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<input type="text" id="txt_username" />
<br />
<span id="lbl_error" style="color: red"></span>
<br />
<br />
<input type="button" id="btn_validate" value="Submit" onclick="validate_username()" />
<script type="text/javascript">
function validate_username() {
var username = document.getElementById("txt_username").value;
var lblError = document.getElementById("lbl_error");
lblError.innerHTML = "";
var expr = /^[a-zA-Z0-9_]{5,12}$/;
if (!expr.test(username)) {
lblError.innerHTML = "Only Alphabets, Numbers and Underscore and between 5 to 12 characters.";
}
}
</script>
</body>
</html>
Conclusion: In above code, I have been explained that how to allow only AlphaNumeric (Letters or Numbers), Underscore ( _ ) in Username with the maximum length of 5 to 12 characters by using JavaScript. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.
Regards
Programming Hub
0 comments:
Post a Comment