The html code
<form method="post" action="" id="user_registration" name="user_registration"> <p><h1>Password strength metter</h1></p> <p> <label for="user">Username</label>
<input type="text" name="user" id="user"/> </p> <p> <label for="name">Name</label>
<input type="text" name="name" id="name"/> </p> <p> <label for="surname">Surname</label>
<input type="text" name="surname" id="surname"/> </p> <p> <label for="email">E-mail</label>
<input type="text" name="email" id="email"/> </p> <p> <label for="pass">Password</label>
<input type="password" name="pass" id="pass"
onkeyup="passwordStrength(this.value)" /> </p> <p> <label for="pass2">Confirm Password</label>
<input type="password" name="pass2" id="pass2"/> </p> <p> <label for="passwordStrength">Password strength</label> <div id="passwordDescription">Password not entered</div> <div id="passwordStrength" class="strength0"></div> </p> <p> <input type="submit" name="submit" id="submit" value="Register"> </p> </form>
The csss code
#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; }
And finally the javascript code
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 point if (password.length > 6) score++; //if password has both lower and uppercase characters give 1 point if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++; //if password has at least one number give 1 point if (password.match(/\d+/)) score++; //if password has at least one special caracther give 1 point if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++; //if password bigger than 12 give another 1 point if (password.length > 12) score++; document.getElementById("passwordDescription").innerHTML = desc[score]; document.getElementById("passwordStrength").className = "strength" + score; }
No comments:
Post a Comment