1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Password meter using javascript</title><script>function passwordStrength(password){ var desc = new Array();desc[0] = "Very Weak";desc[1] = "Weak";desc[2] = "Better";desc[3] = "Medium";desc[4] = "Strong";desc[5] = "Strongest";var score = 0;//if password bigger than 6 give 1 pointif (password.length > 6) score++;//if password has both lower and uppercase characters give 1 pointif ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;//if password has at least one number give 1 pointif (password.match(/\d+/)) score++;//if password has at least one special caracther give 1 pointif ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;//if password bigger than 12 give another 1 pointif (password.length > 12) score++;document.getElementById("passwordDescription").innerHTML = desc[score]; document.getElementById("passwordStrength").className = "strength" + score;}</script></head><body><form method="post"><h1>Password strength meter</h1><label for="pass">Password</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" /><label for="passwordStrength">Password strength</label><div id="passwordDescription">Password not entered</div><div id="passwordStrength" class="strength0"></div></form><style>#passwordStrength{height:10px;display:block;float:left;}.strength0{width:250px;background:#cccccc;}.strength1{width:50px;background:#ff0000;}.strength2{width:100px;background:#ff5f5f;}.strength3{width:150px;background:#56e500;}.strength4{background:#4dcd00;width:200px;}.strength5{background:#399800;width:250px;}</style></body></html> |
