Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में javasctipt का इस्तेमाल करके password को validation करेंगे!. password में सामान्य तोर पर specific character को रखा जाता है तो उसके आधार पर हम password को validation करेंगे जिसमे one lowercase, one uppercase character और one digit और one special character और password की length minimum 8 character की होनी चाहिए!.
Password validation using javascript

HTML code:
<!DOCTYPE html> <html> <head> <title>Password validator using javascript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <style> .container { width: 550px; } .valid{ text-decoration: line-through; color: green; } .in_valid, .error_msg{ color: red; } </style> </head> <body> <div class="container"> <h2>Password validation using javascript</h2> <form method="POST" action="#" id="submt_data"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name"> <div class="error_msg"></div> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email"> <div class="error_msg"></div> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> <div class="error_msg"></div> </div> <div class="password_valid_msg"> <h3>Password validated message:</h3> <p class="character_length">Password should be at least 8 characters long.</p> <p class="one_special_char">Password should contain at least one special character.</p> <p class="one_uppercase">Password should contain at least one uppercase letter.</p> <p class="one_lowercase">Password should contain at least one lowercase letter.</p> <p class="one_digit">Password should contain at least one digit.</p> </div><br> <div class="form-group"> <button type="submit" class="form-control btn btn-primary">Submit</button> </dv> </form> </div> </body> </html>
Javascript code:
<script> var formData = document.getElementById('submt_data'); formData.addEventListener('submit', function(event){ event.preventDefault(); var nameInput = document.getElementById('name'); var emailInput = document.getElementById('email'); var passwordInput = document.getElementById('password'); if (nameInput.value.trim() === '') { var nextElement = nameInput.nextElementSibling; if (nextElement) { nextElement.textContent = 'Please enter your name.'; } return; }else{ var nextElement = nameInput.nextElementSibling; if (nextElement) { nextElement.textContent = ' '; } } if (emailInput.value.trim() === '') { var nextElement = emailInput.nextElementSibling; if (nextElement) { nextElement.textContent = 'Please enter your email.'; } return; }else{ var nextElement = emailInput.nextElementSibling; if (nextElement) { nextElement.textContent = ' '; } } if (passwordInput.value.trim() === '') { var nextElement = passwordInput.nextElementSibling; if (nextElement) { nextElement.textContent = 'Please enter your password.'; } return; }else{ var nextElement = passwordInput.nextElementSibling; if (nextElement) { nextElement.textContent = ' '; } } /* password validation function */ var get_error = validatePassword(); if( !get_error ){ return; } // Create a new XMLHttpRequest object const xhr = new XMLHttpRequest(); /* Now create XMLHttpRequest and send data in server */ }); /* password input get and check */ var passwordInput = document.getElementById('password'); passwordInput.addEventListener('input', validatePassword); function validatePassword(){ var isValid = true; var passwordInput = document.getElementById('password'); var password = passwordInput.value; // Check if the password meets the requirements var errorMessage = ''; if (password.length >= 8 && password.length !=0) { document.querySelector('.character_length').classList.remove('in_valid'); document.querySelector('.character_length').classList.add('valid'); }else{ document.querySelector('.character_length').classList.remove('valid'); document.querySelector('.character_length').classList.add('in_valid'); isValid = false; } if (/[A-Z]/.test(password)) { document.querySelector('.one_uppercase').classList.remove('in_valid'); document.querySelector('.one_uppercase').classList.add('valid'); }else{ document.querySelector('.one_uppercase').classList.remove('valid'); document.querySelector('.one_uppercase').classList.add('in_valid'); isValid = false; } if (/[a-z]/.test(password)) { document.querySelector('.one_lowercase').classList.remove('in_valid'); document.querySelector('.one_lowercase').classList.add('valid'); }else{ document.querySelector('.one_lowercase').classList.remove('valid'); document.querySelector('.one_lowercase').classList.add('in_valid'); isValid = false; } if (/[0-9]/.test(password)) { document.querySelector('.one_digit').classList.remove('in_valid'); document.querySelector('.one_digit').classList.add('valid'); }else{ document.querySelector('.one_digit').classList.remove('valid'); document.querySelector('.one_digit').classList.add('in_valid'); isValid = false; } if( /[!@#$%^&*(),.?":{}|<>]/.test(password) ){ document.querySelector('.one_special_char').classList.remove('in_valid'); document.querySelector('.one_special_char').classList.add('valid'); }else{ document.querySelector('.one_special_char').classList.remove('valid'); document.querySelector('.one_special_char').classList.add('in_valid'); isValid = false; } if( isValid ){ return isValid; }else{ return isValid; } } </script>
Password validation example:
<!DOCTYPE html> <html> <head> <title>Password validator using javascript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <style> .container { width: 550px; } .valid{ text-decoration: line-through; color: green; } .in_valid, .error_msg{ color: red; } </style> </head> <body> <div class="container"> <h2>Password validation using javascript</h2> <form method="POST" action="#" id="submt_data"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name"> <div class="error_msg"></div> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email"> <div class="error_msg"></div> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> <div class="error_msg"></div> </div> <div class="password_valid_msg"> <h3>Password validated message:</h3> <p class="character_length">Password should be at least 8 characters long.</p> <p class="one_special_char">Password should contain at least one special character.</p> <p class="one_uppercase">Password should contain at least one uppercase letter.</p> <p class="one_lowercase">Password should contain at least one lowercase letter.</p> <p class="one_digit">Password should contain at least one digit.</p> </div><br> <div class="form-group"> <button type="submit" class="form-control btn btn-primary">Submit</button> </dv> </form> </div> <script> var formData = document.getElementById('submt_data'); formData.addEventListener('submit', function(event){ event.preventDefault(); var nameInput = document.getElementById('name'); var emailInput = document.getElementById('email'); var passwordInput = document.getElementById('password'); if (nameInput.value.trim() === '') { var nextElement = nameInput.nextElementSibling; if (nextElement) { nextElement.textContent = 'Please enter your name.'; } return; }else{ var nextElement = nameInput.nextElementSibling; if (nextElement) { nextElement.textContent = ' '; } } if (emailInput.value.trim() === '') { var nextElement = emailInput.nextElementSibling; if (nextElement) { nextElement.textContent = 'Please enter your email.'; } return; }else{ var nextElement = emailInput.nextElementSibling; if (nextElement) { nextElement.textContent = ' '; } } if (passwordInput.value.trim() === '') { var nextElement = passwordInput.nextElementSibling; if (nextElement) { nextElement.textContent = 'Please enter your password.'; } return; }else{ var nextElement = passwordInput.nextElementSibling; if (nextElement) { nextElement.textContent = ' '; } } /* password validation function */ var get_error = validatePassword(); if( !get_error ){ return; } // Create a new XMLHttpRequest object const xhr = new XMLHttpRequest(); /* Now create XMLHttpRequest and send data in server */ }); /* password input get and check */ var passwordInput = document.getElementById('password'); passwordInput.addEventListener('input', validatePassword); function validatePassword(){ var isValid = true; var passwordInput = document.getElementById('password'); var password = passwordInput.value; // Check if the password meets the requirements var errorMessage = ''; if (password.length >= 8 && password.length !=0) { document.querySelector('.character_length').classList.remove('in_valid'); document.querySelector('.character_length').classList.add('valid'); }else{ document.querySelector('.character_length').classList.remove('valid'); document.querySelector('.character_length').classList.add('in_valid'); isValid = false; } if (/[A-Z]/.test(password)) { document.querySelector('.one_uppercase').classList.remove('in_valid'); document.querySelector('.one_uppercase').classList.add('valid'); }else{ document.querySelector('.one_uppercase').classList.remove('valid'); document.querySelector('.one_uppercase').classList.add('in_valid'); isValid = false; } if (/[a-z]/.test(password)) { document.querySelector('.one_lowercase').classList.remove('in_valid'); document.querySelector('.one_lowercase').classList.add('valid'); }else{ document.querySelector('.one_lowercase').classList.remove('valid'); document.querySelector('.one_lowercase').classList.add('in_valid'); isValid = false; } if (/[0-9]/.test(password)) { document.querySelector('.one_digit').classList.remove('in_valid'); document.querySelector('.one_digit').classList.add('valid'); }else{ document.querySelector('.one_digit').classList.remove('valid'); document.querySelector('.one_digit').classList.add('in_valid'); isValid = false; } if( /[!@#$%^&*(),.?":{}|<>]/.test(password) ){ document.querySelector('.one_special_char').classList.remove('in_valid'); document.querySelector('.one_special_char').classList.add('valid'); }else{ document.querySelector('.one_special_char').classList.remove('valid'); document.querySelector('.one_special_char').classList.add('in_valid'); isValid = false; } if( isValid ){ return isValid; }else{ return isValid; } } </script> </body> </html>