June 15, 2020
How to Check If Passwords Match in Javascript
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <input type="password" placeholder="Enter Password" id="pass1"> <input type="password" placeholder="Confirm Password" id="pass2"> <h1>Result</h1> </div> <script src="script.js"></script> </body> </html> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { text-align: center; } div { display: inline-block; } input { display: block; padding: 10px 20px; margin-top: 10px; } |
Javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let pass1 = document.querySelector('#pass1'); let pass2 = document.querySelector('#pass2'); let result = document.querySelector('h1'); function checkPassword () { result.innerText = pass1.value == pass2.value ? 'Matching' : 'Not Matching'; } pass1.addEventListener('keyup', () => { if (pass2.value.length != 0) checkPassword(); }) pass2.addEventListener('keyup', checkPassword); |
