JQuery password Strength Checker - Web Development and Web Design Codes

Latest

Sunday, February 25, 2018

JQuery password Strength Checker

JQuery password Strength Checker

JQuery password Strength Checker
JQuery password Strength Checker
Hi Friends in this jquery script we will learn how to check password strength using JavaScript...
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
?
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
<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..
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article JQuery Checked and Unchecked All checkbox Older Article html table design using css
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)