Created
November 7, 2015 22:58
-
-
Save SErr0r/47e0334cbfa7c3a534a4 to your computer and use it in GitHub Desktop.
How to check password strength using jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <title>How to check password strength using jQuery</title> | |
| <!--jQuery Library--> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="style.css" /> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="header"> | |
| <h2>Password Strength Checking with jQuery<h2> | |
| </div> | |
| <div id="content"> | |
| <!-- form start--> | |
| <form id="register"> | |
| <label for="password">Password: </label> | |
| <input name="password" id="password" type="password"/> | |
| <span id="result"></span> | |
| </form> | |
| <!-- form end--> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*** jQuery document ready. ***/ | |
| $(document).ready(function() { | |
| /*** assigning keyup event to password field so everytime user type code will execute ***/ | |
| $('#password').keyup(function() { | |
| $('#result').html(checkStrength($('#password').val())) | |
| }) | |
| /*** checkStrength is function which will do the main password strength checking for us ***/ | |
| function checkStrength(password) { | |
| //initial strength | |
| var strength = 0 | |
| //if the password length is less than 6, return message. | |
| if (password.length < 6) { | |
| $('#result').removeClass() | |
| $('#result').addClass('short') | |
| return 'Too short' | |
| } | |
| //length is ok, lets continue. | |
| //if length is 8 characters or more, increase strength value | |
| 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 | |
| //now we have 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' | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body, ul, ol, li, form, fieldset, legend { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #CCC repeat; | |
| font-family: 'Vollkorn', serif, Arial; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| } | |
| h1, h2, h3, h4, h5, h6, p { | |
| margin: 0; | |
| } | |
| p { | |
| margin-bottom:15px; | |
| } | |
| a { | |
| color: #0073BF; | |
| text-decoration: none; | |
| } | |
| #container { | |
| width: 600px; | |
| margin: 0 auto; | |
| background: #ffffff; | |
| padding: 20px; | |
| } | |
| #header { | |
| text-align: center; | |
| margin: 20px 0 40px; | |
| } | |
| #footer { | |
| text-align: center; | |
| margin-top: 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; | |
| } | |
| #result { | |
| margin-left: 5px; | |
| } | |
| #register .short { | |
| color: #FF0000; | |
| } | |
| #register .weak { | |
| color: #E66C2C; | |
| } | |
| #register .good { | |
| color: #2D98F3; | |
| } | |
| #register .strong { | |
| color: #006400; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment