|
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!DOCTYPE html> <html> <head> <title>Password strength checker in jQuery - Demo Preview</title> <meta content="noindex, nofollow" name="robots"> <title>How to check password strength using jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div id="container"> <div id="header"> <h2>Password Strength Checking with jQuery</h2> </div> <div id="content"> <form id="register" name="register"> <label for="password">Password :</label> <input id="password" name="password" type="password"> <span id="result"></span> </form> </div> </div> </body> </html> <script> $(document).ready(function() { $('#password').keyup(function() { $('#result').html(checkStrength($('#password').val())) }) function checkStrength(password) { var strength = 0 if (password.length < 6) { $('#result').removeClass() $('#result').addClass('short') return 'Too short' } if (password.length > 7) strength += 1 // If password contains both lower and uppercase characters, increase strength value. if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1 // If it has numbers and characters, increase strength value. if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1 // If it has one special character, increase strength value. if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 // If it has two special characters, increase strength value. if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1 // Calculated strength value, we can return messages // If value is less than 2 if (strength < 2) { $('#result').removeClass() $('#result').addClass('weak') return 'Weak' } else if (strength == 2) { $('#result').removeClass() $('#result').addClass('good') return 'Good' } else { $('#result').removeClass() $('#result').addClass('strong') return 'Strong' } } }); </script> <style> body{ margin:0; padding:0; background:#CCC repeat; font-family:'Vollkorn',serif,Arial; font-size:15px; line-height:1.5 } #container{ width:600px; margin:0 auto; background:#fff; padding:20px } #header{ text-align:center; margin:20px 0 40px } #register{ margin-left:100px } #register label{ margin-right:5px } #register input{ padding:5px 7px; border:1px solid #d5d9da; box-shadow:0 0 5px #e8e9eb inset; width:250px; font-size:1em; outline:0 } #register .short{ font-weight:700; color:red } #register .weak{ font-weight:700; color:orange } #register .good{ font-weight:700; color:#2D98F3 } #register .strong{ font-weight:700; color:#32cd32 } </style> |
