JQuery password Strength Checker
 |
| JQuery password Strength Checker |
I have provide some easy codes for beginners to understand jquery password strength checker..
use the following codes to implement jquery password strength checker..
index.html
<html>
<head>
<title>JQuery Password Strength Checker</title>
<style>
.weak-password{
color:#ff8080;
font-weight:bold;
font-style:italic;
}
.medium-password{
color:#ff1a1a;
font-weight:bold;
font-style:italic;
}
.strong-password{
color:#b30000;
font-weight:bold;
font-style:italic;
}
input[type=password]{
padding:4px;
border-radius:4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function PasswordStrength() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,+,=,?,>,<])/;
if(($('#password').val().length<4)){
$('#passwordstatus').html("");
}else{
if($('#password').val().length<7) {
$('#passwordstatus').removeClass();
$('#passwordstatus').addClass('weak-password');
$('#passwordstatus').html("Weak PassWord");
} else {
if($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {
$('#passwordstatus').removeClass();
$('#passwordstatus').addClass('strong-password');
$('#passwordstatus').html("Strong PassWord");
} else {
$('#passwordstatus').removeClass();
$('#passwordstatus').addClass('medium-password');
$('#passwordstatus').html("Medium PassWord");
}
}
}
}
</script>
</head>
<h3>JQuery password Strength Checker</h3>
<table>
<tr>
<td><b style='color:green'>Check PassWord:</b></td>
<td><input type="password" id="password" onKeyUp="PasswordStrength();" /></td>
</tr>
<tr>
<td></td>
<td id="passwordstatus"></td>
</tr>
</table>
</html>
That's it How to create JQuery password strength Checker...
If You like this post please share..Thank you..
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.