Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to validate an input is alphanumeric or not using JavaScript?
We have been given the task of validating the input string and need to check whether it is alphanumeric or not using JavaScript. The alphanumeric string contains only numeric and alphabetical characters, including uppercase or lowercase characters, and even it doesn’t contain any special characters or spaces.
Below, we will see two approaches to validate an input string.
Use the charCodeAt() method
We can use the charCodeAT() method to get the ASCII value of any character. Here, we will iterate through every character of the string and check the ASCII value of every character. The ASCII code between 48 to 57 is for numeric characters, 97 to 122 is for lowercase alphabetic characters, and 65 to 90 is for uppercase alphabetic characters.
So, if we find any character whose ASCII value is not between the above given ASCII range, we can say that string is not alphanumeric.
Syntax
Users can follow the syntax below to use the charCodeAT() method to check whether the input string is alphanumeric.
let charCode = char.charCodeAt(0);
if (!(charCode > 47 && charCode < 58) &&
!(charCode > 96 && charCode < 123) &&
!(charCode > 64 && charCode < 91)
) {
// string is not alphanumeric
return;
}
In the above syntax, char is a single character. We used the charCodeAT() method to get the ASCII value of a single character. After that, we used the if-else statement to check if the ASCII code of the character is between the ASCII values of the numeric and alphabetic characters.
Example 1
In the example below, we have created the two input strings containing the various characters. Also, we have defined the validateString() function. In the validateString() function, we iterate through every string character using the for-of loop. Also, we used the charCodeAt() method by passing 0 as a parameter to get the ASCII value of the character.
Afterwards, we check if any character's ASCII code is not between the ASCII ranges of the numeric and alphabetic characters; we can say that string is not alphanumeric.
<html>
<body>
<h3>Using the <i> for loop and charCodeAT() method </i> to check if input string is alphanumeric or not</h3>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let str1 = "aredsUADFSKH121342kjbrewdfv";
let str2 = "dfdrg rflrtke 435 3df;fd'gfdg";
function validateString(string) {
for (let char of string) {
let charCode = char.charCodeAt(0);
if (!(charCode > 47 && charCode < 58) && !(charCode > 96 && charCode < 123) && !(charCode > 64 && charCode < 91)
) {
output.innerHTML += "The string " + string + " is not alphanumeric! </br>";
return;
}
}
output.innerHTML += "The string " + string + " is an alphanumeric! </br>";
}
validateString(str1);
validateString(str2);
</script>
</body>
</html>
Use the regular expression
We can create the regular expression using the RegExp() constructor with a new keyword. It is a pattern, and we can match the input string with a regular expression pattern, and based on that, it returns a true or false boolean value.
Syntax
Users can follow the syntax below to use the regular expression to validate the alphanumeric string.
let strRegex = new RegExp(/^[a-z0-9]+$/i); let result = strRegex.test(string);
In the above syntax, the result variable contains the boolean value based on whether the string is alphanumeric.
Regular expression explanation
^ - It represents the start of the string.
[a-z0-9]+ - It represents only characters between the a to z or 0 to 9.
$ - It represents the end of the string.
i – It is a flag for the regular expression used for case-insensitive string comparison.
Example 2
In the example below, we are invoking the validateString() function by passing the various strings as a parameter. In the function, we created the regular explanation as explained above. After that, we used the test() method by taking a regular expression as a reference and passing the input string as a validation parameter.
If the test() method returns true, the input string is alphanumeric and contains only numeric and alphabetic characters; Otherwise, the string is not alphanumeric.
<html>
<body>
<h3>Using the <i> Regular expression </i> to check if input string is alphanumeric or not</h3>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let str1 = "Welcome to the tutorialsPoint";
let str2 = "Hello123";
function validateString(string) {
// Defining the regular expression
let strRegex = new RegExp(/^[a-z0-9]+$/i);
// match the regex with the string
let result = strRegex.test(string);
if (result) {
output.innerHTML += "The string " + string + " is an alphanumeric! </br>";
} else {
output.innerHTML += "The string " + string + " is not alphanumeric! </br>";
}
}
validateString(str1);
validateString(str2);
</script>
</body>
</html>
Example 3
In the example below, we are taking the string from the user using the prompt () method. After that, we used the regular expression to validate the string as we have used in the above example, but here we have used a different regular expression.
Here, [^a-zA-Z0-9] represents any character that is not between the a to z, A to Z, and 0 to 9. So, the test() method returns true if the string is not alphanumeric and false for alphanumeric strings.
<html>
<body>
<h3>Using the <i> Regular expression </i> to check if input string is alphanumeric or not</h3>
<div id = "output"> </div>
<button onClick = "getInputAndValidate()"> Validate random string </button>
<script>
var output = document.getElementById('output');
function getInputAndValidate() {
let string = prompt("Enter a string to validate", "1232dwe");
let strRegex = new RegExp(/[^a-zA-Z0-9]/);
// match the regex with the string
let result = strRegex.test(string);
if (!result) {
output.innerHTML += "The string " + string + " is an alphanumeric! </br>";
} else {
output.innerHTML += "The string " + string + " is not alphanumeric! </br>";
}
}
</script>
</body>
</html>
We learned to validate alphanumeric strings in this tutorial. We used the two different regular expressions to validate alphanumeric strings. Also, we have learned the naïve approach using the for loop and charCodeAT() method, but it is not time efficient, so it is not recommended.
7K+ Views
