DOCTYPE html>
<html>
<head>
<title>SIMPLE PASSWORD STRENGTH METER USING JQUERYtitle>
<style>
#content {
margin:0 auto;
text-align:center;
}
.short { color:#FF0000; }
.weak { color:#E66C2C; }
.good { color:#2D98F3; }
.strong { color:#006400; }
style>
head>
<body>
<div id = "content">
<h3>SIMPLE PASSWORD STRENGTH METER USING JQUERYh3>
<input type="password" name="password" id="password" placeholder="Enter Password" style="width:250px;"> <br/>
<progress value=0 max=100>progress><span id="msg">span>
div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">script>
<script>
$(function()
{
$('#password').keyup(function()
{
var password = $.trim($(this).val());
var count = 0;
var className, progress, strength;
//if the password length is less than 6
if(password.length < 6) count = 0
//if length is 8 characters or more, increase counter value
if (password.length > 7) count += 1
//if password contains both lower and uppercase characters, increase counter value
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) count += 1
//if it has numbers and characters, increase counter value
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) count += 1
//if it has one special character, increase counter value
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) count += 1
//if it has two special characters, increase counter value
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) count += 1
if(count==0) {
className = "short";
progress = 10;
message = "Too Short";
}
else if (count == 1 ) {
className = "weak";
progress = 40;
message = "Weak";
}
else if (count == 2 ) {
className = "good";
progress = 70;
message = "Good";
}
else {
className = "strong";
progress = 100;
message = "Strong";
}
$("#msg").removeClass();
$("#msg").addClass(className);
$("#msg").empty().text(message);
$("progress").val(progress);
});
});
script>
body>
html>
|
