Welcome To ITSolutionsGuides,
Lets see How To Create Password Validation Using Regex In Jquery using it solutions guides tutorial.
While creating any form and you need any strong password validation regex is the best option for the password validation. By using the regex password validation we can create strong password validation. We can also customize the regex to make our own regex validation rule to make the password validation more stronger. Javascript regex password validation is the best solution for the password validation. Lets see how to create password validation using regex jquery.
Learn jQuery for robust password validation! Utilize regex to enforce security standards. Enhance user authentication with custom patterns and error handling. Master the art of safeguarding user credentials effortlessly.
Lets create the input field to get the input. Since we need to check on each character is typed we should use the keyup() function in the Jquery. Now we are going to create seperate variable for minimum lenght, uppercase, lowercase, special characters, characters and then assign the value of regex to the corresponding variable.
Then we will use if else statement to verify the user input and then display the corresponding message to the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITSolutionsGuides Tutorial</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="col-6 mx-5">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<div id="passwordMessage"></div>
<script>
$(document).ready(function() {
$('#password').on('keyup', function() {
validatePassword($(this).val());
});
function validatePassword(password) {
// Define your password criteria
var minLength = 8;
var uppercaseRegex = /[A-Z]/;
var lowercaseRegex = /[a-z]/;
var digitRegex = /\d/;
var specialCharRegex = /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/;
// Check the conditions
var isValid = true;
if (password.length < minLength) {
isValid = false;
$('#passwordMessage').text('Password must be at least ' + minLength + ' characters long.');
} else if (!uppercaseRegex.test(password)) {
isValid = false;
$('#passwordMessage').text('Password must contain at least one uppercase letter.');
} else if (!lowercaseRegex.test(password)) {
isValid = false;
$('#passwordMessage').text('Password must contain at least one lowercase letter.');
} else if (!digitRegex.test(password)) {
isValid = false;
$('#passwordMessage').text('Password must contain at least one digit.');
} else if (!specialCharRegex.test(password)) {
isValid = false;
$('#passwordMessage').text('Password must contain at least one special character.');
} else {
$('#passwordMessage').text('Your Password is strong !!!');
}
return isValid;
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides