A quick ’n’ clean jQuery plugin for measuring password complexity

peanut butter kisses The tasty morsel of the day is a simple jQuery plugin. It makes suggestions to the user for how to strengthen a weak password. For the purposes of this example, strong passwords contain characters in all of four categories: capital letters, lower case letters, numerals, and punctuation characters.

Several jQuery and JavaScript best practices are in evidence here.

It’s written using only JavaScript’s “Good Parts.” Run your code through JSLint to find what my grandmother from Utah would have called “an accident what’s lookin’ fer a place ta happen.”

Reusable behavior is implemented as a jQuery plugin. Adding behavior with jQuery is a snap. But one-off jQuery snippets can be made more maintainable and reusable by rewriting them as plugins.

It plays nicely with libraries that may be in use besides jQuery. Like a number of other JavaScript frameworks, jQuery defines a $ function. Be a conflict avoider. Tell jQuery to keep its hands to itself by invoking no-conflict mode.

Behavior can be applied to multiple elements on a page. An easy mistake to make in your jQuery plugin work is to assume that only one element per page will be affected by a particular behavior. If all you’re doing is altering the element itself then this may work just fine. In this example, however, we’re adding password suggestions in a <span> next to the password input box. Each of multiple input boxes with this behavior should have its own suggestions <span>. Note the use of each and how we create a corresponding <span> for each input box receiving the behavior.

Bon appétit! end of article

Blog comments powered by Disqus
Follow Me on GitHub