Password Strength Checker

[adammahri2051]

This tutorial we will teach you how to construct a Password Strength Checker that gives the users feedback as to whether their password has sufficiently met the complexity requirements. A strong password is critical to account security and this tutorial teaches you how to design a system that gauges password strength using jQuery. The user also will be able to click on a check box to see their real password to avoid mistake when typing their desired passwords.

Sample Code

index.php - index.php is for the user interface and for the javascript to create a dialog in the given field.

1. <!
   
   DOCTYPE HTML>
   
2. <
   
   html>
   
3. <
   
   head>
   
4. <
   
   title>
   
   Password Strength Checker</
   
   title>
   
5. <
   
   link
   
   href=
   
   "css/password_strength.css"
   
   rel=
   
   "stylesheet"
   
   type=
   
   "text/css"
   
   />
   
6. <
   
   script type=
   
   "text/javascript"
   
   src=
   
   "js/jquery-1.10.2.min.js"
   
   >
   
   </script>
   
7. <
   
   script type=
   
   "text/javascript"
   
   src=
   
   "js/password_strength.js"
   
   >
   
   </script>
   
8. </
   
   head>
   
9. <
   
   body>
   
10. <
    
    div id=
    
    "form_wrapper"
    
    >
    
11. <
    
    h1 align=
    
    "center"
    
    >
    
    Password Strength Checker</
    
    h1>
    
12. <
    
    div><
    
    span>
    
    New
    
    Password</
    
    span></
    
    div>
    
13. <
    
    div>
    
14. <
    
    input class
    
    =
    
    "pass-word-field"
    
    type=
    
    "password"
    
    id=
    
    "pass-word"
    
    />
    
15. <
    
    input class
    
    =
    
    "pass-word-field"
    
    style=
    
    "display:none;"
    
    id=
    
    "pass-word-two"
    
    type=
    
    "text"
    
    />
    
16. </
    
    div>
    
17. <
    
    div><
    
    span>
    
    Verify New
    
    Password</
    
    span></
    
    div>
    
18. <
    
    div>
    
19. <
    
    input class
    
    =
    
    "verify-password-field"
    
    type=
    
    "password"
    
    id=
    
    "verify-pass-word"
    
    />
    
20. <
    
    input class
    
    =
    
    "verify-password-field"
    
    style=
    
    "display:none;"
    
    id=
    
    "verify-pass-word-two"
    
    type=
    
    "text"
    
    />
    
21. </
    
    div>
    
22. <
    
    div style=
    
    "float:right;"
    
    ><
    
    span>
    
    Show Password:</
    
    span><
    
    input type=
    
    "checkbox"
    
    id=
    
    "show-hide-passwords"
    
    ></
    
    div><
    
    br clear=
    
    "all"
    
    >
    
23. <
    
    div id=
    
    "pass-status"
    
    ></
    
    div>
    
24. <
    
    div class
    
    =
    
    "system_buttons"
    
    onClick=
    
    "submit_data();"
    
    >
    
    Submit</
    
    div>
    
25. </
    
    div>
    
26. </
    
    body>
    
27. </
    
    html>
    

password_strength.js - is for the inputs of data to make a short dialog and pass to the user interface to create a message to inform the user if their password is weak, good, or strong.

1. var
   
   pass_word =
   
   $(
   
   '#pass-word'
   
   )
   
   ;
   
2. var
   
   verify_password =
   
   $(
   
   '#verify-pass-word'
   
   )
   
   ;
   
3. var
   
   password_status =
   
   $(
   
   '#pass-status'
   
   )
   
   ;
   
4. password_status.hide
   
   (
   
   )
   
   ;
   
5. $(
   
   ".pass-word-field"
   
   )
   
   .keyup
   
   (
   
   function
   
   (
   
   e)
   
6. {
   
7. pass_word =
   
   $(
   
   this
   
   )
   
   .attr
   
   (
   
   'id'
   
   )
   
   ==
   
   "pass-word"
   
   ?
   
   $(
   
   this
   
   )
   
   :
   
   $(
   
   '#pass-word-two'
   
   )
   
   ;
   
8. if
   
   (
   
   $(
   
   pass_word)
   
   .val
   
   (
   
   )
   
   ==
   
   ""
   
   )
   
9. {
   
10. password_status.hide
    
    (
    
    )
    
    ;
    
11. return
    
    false
    
    ;
    
12. }
    
13. else
    
14. {
    
15. password_status.show
    
    (
    
    )
    
    ;
    
16. if
    
    (
    
    very_strong_password.test
    
    (
    
    pass_word.val
    
    (
    
    )
    
    )
    
    )
    
17. {
    
18. password_status.removeClass
    
    (
    
    )
    
    .addClass
    
    (
    
    'very_strong_password'
    
    )
    
    .html
    
    (
    
    "Very strong..."
    
    )
    
    ;
    
19. }
    
20. else
    
    if
    
    (
    
    just_strong_password.test
    
    (
    
    pass_word.val
    
    (
    
    )
    
    )
    
    )
    
21. {
    
22. password_status.removeClass
    
    (
    
    )
    
    .addClass
    
    (
    
    'just_strong_password'
    
    )
    
    .html
    
    (
    
    "Strong..."
    
    )
    
    ;
    
23. }
    
24. else
    
    if
    
    (
    
    good_password.test
    
    (
    
    pass_word.val
    
    (
    
    )
    
    )
    
    )
    
25. {
    
26. password_status.removeClass
    
    (
    
    )
    
    .addClass
    
    (
    
    'considrate_pass'
    
    )
    
    .html
    
    (
    
    "Good..."
    
    )
    
    ;
    
27. }
    
28. else
    
    if
    
    (
    
    weak_password.test
    
    (
    
    pass_word.val
    
    (
    
    )
    
    )
    
    )
    
29. {
    
30. password_status.removeClass
    
    (
    
    )
    
    .addClass
    
    (
    
    'password_is_weak'
    
    )
    
    .html
    
    (
    
    "Still Weak..."
    
    )
    
    ;
    
31. }
    
32. else
    
33. {
    
34. password_status.removeClass
    
    (
    
    )
    
    .addClass
    
    (
    
    'weak_password'
    
    )
    
    .html
    
    (
    
    "Very Weak..."
    
    )
    
    ;
    
35. }
    
36. }
    
37. }
    
    )
    
    ;
    

Hope that you learn in this tutorial and enjoy coding. Don't forget to LIKE & SHARE this website.

Download