Jquery Code For Password Strength - Jquery
How to check password strength in jquery code?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Password strength checker is generally used to check the secret codes strength. This jquery code allows you to check the strength for your password. The sample code to check your password strength is given below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#passwordtype").keyup(function()
{
var pw=$("#passwordtype").val();
var pwcolor=$("#pword_color");
var pwpercent=$("#pword_percent");
var pwstrength=$("#pword_strength");
var dynacolor=$("#dynacolor");
var numcheck =new RegExp('[0-9]');
var lcheck = /[a-z]/;
var ucheck = /[A-Z]/;
var symcheck=/.[!,@,#,$,%,^,amp,*,?,_,~,-,£,(,)]/;
if (pw.length >=8)
{
if((pw.match(numcheck))||(pw.match(lcheck))||(pw.match(ucheck))||(pw.match(symcheck)))
{
pwpercent.html("25%");
pwstrength.html("Very Weak");
}
if(((pw.match(numcheck))ampamp(pw.match(lcheck)))||((pw.match(lcheck))ampamp(pw.match(ucheck)))||((pw.match(ucheck))ampamp(pw.match(symcheck)))||((pw.match(symcheck))ampamp(pw.match(numcheck)))||((pw.match(lcheck))ampamp(pw.match(symcheck)))||((pw.match(numcheck))ampamp(pw.match(ucheck))))
{
pwpercent.html("50%");
pwstrength.html("Weak");
}
if(((pw.match(numcheck))ampamp(pw.match(lcheck))ampamp(pw.match(ucheck)))||((pw.match(lcheck))ampamp(pw.match(ucheck))ampamp(pw.match(symcheck)))||((pw.match(symcheck))ampamp(pw.match(numcheck))ampamp(pw.match(lcheck)))||((pw.match(numcheck))ampamp(pw.match(ucheck))ampamp(pw.match(symcheck))))
{
pwpercent.html("75%");
pwstrength.html("Strong");
}
if((pw.match(numcheck))ampamp(pw.match(lcheck))ampamp(pw.match(ucheck))ampamp(pw.match(symcheck)))
{
pwpercent.html("100%");
pwstrength.html("Very Strong");
}
}
if(pw.length==0)
{
pwpercent.html("0%");
pwstrength.html("Very Weak");
}
if(pw.length==1)
{
pwpercent.html("0%");
pwstrength.html("Very Weak");
$("#dynacolor").css("width", "5%");
}
if(pw.length>1ampamppw.length<=2)
{
pwpercent.html("5%");
pwstrength.html("Very Weak");
}
if(pw.length>2ampamppw.length<=5)
{
pwpercent.html("18%");
pwstrength.html("Very Weak");
}
if(pw.length>5ampamppw.length<8)
{
pwpercent.html("22%");
pwstrength.html("Very Weak");
}
});
});
</script>
<div align='center'>
<b>Password</b>
<div id="pword_type"><input type="password" class='input_text_class' id="passwordtype" placeholder="Type your password here" /></div>
Strength
<div id="pword_color">
<div id="dynacolor" float="left"></div>
</div>
<div id="pword_level" align="center">
<div id="pword_percent" align="center" ></div>
<div id="pword_strength" align="center"></div>
</div>
</div>
