-
-
Save remy/424434 to your computer and use it in GitHub Desktop.
Just a refactor for njonsson - Example seen here: http://jsbin.com/ayoxa4/2
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
| <?xml version='1.0' encoding='utf-8' ?> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> | |
| <head> | |
| <title> | |
| passwordComplexity jQuery plugin demo | |
| </title> | |
| <style type='text/css'> | |
| * { | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-size: 100%; | |
| } | |
| .field { | |
| clear: both; | |
| } | |
| .field label { | |
| display: block; | |
| float: left; | |
| padding: 0.25em 0.5em 0 0; | |
| text-align: right; | |
| width: 5em; | |
| height: 2em; | |
| } | |
| .field input { | |
| width: 6em; | |
| } | |
| .password-complexity { | |
| background-color: #fcf0ad; | |
| border-top: 1px solid lightgrey; | |
| border-right: 1px solid dimgray; | |
| border-bottom: 1px solid dimgray; | |
| border-left: 1px solid lightgrey; | |
| font-size: 70%; | |
| margin-left: 1em; | |
| padding: 0.25em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='field'> | |
| <label for='password'>Password:</label> | |
| <input id='password' name='password' type='password' /> | |
| </div> | |
| <div class='field'> | |
| <label for='password_confirmation'>Again:</label> | |
| <input name='password_confirmation' type='password' /> | |
| </div> | |
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> | |
| <script src='jquery.password-complexity.js' type='text/javascript'></script> | |
| <script type='text/javascript'> | |
| //<![CDATA[ | |
| jQuery.noConflict(); | |
| // RS - don't need document.ready twice | |
| jQuery(document).ready(function($) { | |
| $(':password:first').passwordComplexity(); | |
| }); | |
| //]]> | |
| </script> | |
| </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
| 'use strict'; | |
| (function ($) { | |
| $.fn.passwordComplexity = function () { | |
| var suggestionHTML = '<span class="password-complexity" ' + | |
| 'style="display: none;">' + | |
| '</span>'; | |
| return this.after(suggestionHTML).blur(function () { | |
| var password = $(this).val(), | |
| $suggestEl = $(this).next(), | |
| suggestions = [], | |
| message = null; | |
| if (0 !== password.length) { | |
| if (password.match(/[a-z]/) === null) { | |
| suggestions.push('a lowercase letter'); | |
| } | |
| if (password.match(/[A-Z]/) === null) { | |
| suggestions.push('an uppercase letter'); | |
| } | |
| if (password.match(/\d/) === null) { | |
| suggestions.push('a numeric character'); | |
| } | |
| if (password.match(/[\W_]/) === null) { | |
| suggestions.push('a punctuation character'); | |
| } | |
| if (0 !== suggestions.length) { | |
| message = 'Add ' + | |
| suggestions.join(' or ') + | |
| ' to strengthen your password.'; | |
| } | |
| } | |
| if (message) { | |
| $suggestEl.html(message).fadeIn(); | |
| } else { | |
| $suggestEl.fadeOut(function () { | |
| $suggestEl.html(message); | |
| }); | |
| } | |
| }); | |
| }; | |
| }(jQuery)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment