Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript Regex to Allow Only Numbers, Letters, and Underscore
In this article, we will learn the regex program to display names to be only numbers, letters, and underscores In Java. Validating user input is essential for maintaining data integrity and security in web applications.
JavaScript Regex for Name Validation
Regular expressions regex is probably more powerful in defining patterns to search for in the text validations. A typical validation is confirming a name consists of only letters (A-Z, a-z), digits (0-9), and underscore (_).
To ensure that a name contains only letters we can use the following regex ?
/^\w+$/
- ^: Start of the string
-
\w: Matches letters (A-Z, a-z), numbers (0-9), and underscores (_) only
-
+: Ensures at least one character
- $: End of the string
This pattern ensures that no special characters, spaces, or symbols other than letters, numbers, and underscores are allowed.
Using JavaScript Regex and Event Listener
We will integrate the simple web form with a user's name as an input field and pressing on the button will cause the regex to be validated.
Following are the steps to validate the name using the regex pattern ?
- We select the .result element to display messages.
- We add an event listener to the button.
- When clicked ?
- The user's input (.txt) is fetched.
- It is matched against the regex pattern /^\w+$/.
- If valid, the result displays "The text entered is valid".
- Otherwise, it displays "The text entered is not valid".
- The user's input (.txt) is fetched.
The document.querySelector() Selects the first element that matches a specified CSS selector ?
let resEle = document.querySelector(".result");
The addEventListener() attaches an event handler to an element ?
document.querySelector(".Btn").addEventListener("click", () => {
// Code to execute when button is clicked
});
The match() method tests a string against a regular expression pattern and returns matches if found ?
var match = str.match(regex);
Example
Following is the code to display names to be only numbers, letters, and underscores using regex in JavaScript ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Numbers, letters and underscore only regex match</h1>
<div style="color: green;" class="result"></div>
<input type="text" class="txt">
<button class="Btn">CHECK</button>
<h3>
Click the above button to check if the text contains only numbers,letters and underscore or not
</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
var str = document.querySelector(".txt").value;
var regex = /^\w+$/;
var match = str.match(regex);
if (match) resEle.innerHTML = "The text entered is valid";
else resEle.innerHTML = "The text enterd is not valid";
});
</script>
</body>
</html>
Output
The above code will produce the following output ?
On entering text having space between them and clicking on ?CHECK' ?
On entering valid text and clicking on ?CHECK' ?
Conclusion
Using JavaScript regex, we can easily enforce name validation to allow only letters, numbers, and underscores. This method ensures cleaner data input and prevents unwanted characters in usernames or identifiers.
416 Views
