Password validation along with example
Here's an example of a simple password validation along with a login form using HTML, CSS, and JavaScript:
html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
.error-message {
color: red;
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<span id="passwordError" class="error-message"></span><br><br>
<input type="submit" value="Login">
</form>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
javascript
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
// Get input values
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// Password validation
if (password.length < 8) {
document.getElementById("passwordError").textContent = "Password must be at least 8
characters long";
} else {
// Password is valid, proceed with login
document.getElementById("passwordError").textContent = ""; // Clear error message
// Perform login operation (e.g., send data to server)
// ...
// If login is successful, redirect to another page
// ...
}
});In this example, we have a login form with two fields: username and password. The JavaScript code adds an event listener to the form's submit event. When the form is submitted, the event listener function is executed.
Inside the event listener function, we prevent the default form submission using `event.preventDefault()`. Then, we retrieve the values entered in the username and password fields.
Next, we perform password validation. In this example, we check if the password length is less than 8 characters. If the password is not valid, an error message is displayed in the `<span>` element with the id "passwordError". Otherwise, if the password is valid, we clear the error message.
Finally, you can add code to perform the actual login operation, such as sending the username and password to a server for authentication. If the login is successful, you can redirect the user to another page or perform any other desired actions.
Note: This is a simple example for demonstration purposes. In real-world scenarios, you should consider more robust password validation techniques, like checking for complexity requirements (e.g., uppercase, lowercase, numbers, special characters) and hashing passwords for security.
OUTPUT-
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.