jQuery SimplePassMeter
SimplePassMeter is a jQuery plug-in that makes checking the requirements for - and the strength of - passwords much easier. Everything is ready to go out of the box, or you can configure many of the pieces to make this plug-in exactly what you need.
Requires jQuery 1.2+
Features
- Simple to implement
- Displays password requirement violations as well as strength
- Completely customizable
- Supports custom password requirements
- 7.9 Kb minified
Options and Features
All options
'showOnFocus': BOOLEAN If true, only shows the password strength meter UI when the field is focused'showOnValue': BOOLEAN If true, only shows the password strength meter UI when the field has some value (in other words, once the user has typed something), this is regardless of any focus'location': STRING Location of the meter UI, one of 't'op, 'b'ottom, 'l'eft, or 'r'ight. NOTE that 't'op is not very reliably placed, and could overflow into your field.'offset': NUMBER Pixels that the meter UI is offset from the password field.'container': STRING jQuery selector for the containing element you want the UI to be in. NOTE: this disables absolute positioning and thus makes the 'location' and 'offset' fields obsolete. 'requirements': OBJECT All requirements that the password must fulfill, an object with sub-objects. Each requirement should have a unique key, and be itself an object with various members (see below). You can specify only some of the members in order to use the other default members; for example, specify the "minLength" requirement, but only the "value" member thus using the default "callback" function. 'requirementName': OBJECT A requirment specification, the name of the requirement is the key for the "requirements" option object. 'value': VARIOUS, The "value" for any requirement must evaluate to true (no zero, no false, no null), but can be requirement-specific as in the "minLength" case where the number of characters is used. In others where the value is not specific use a simple boolean true. 'regex': STRING, If the user's input matches the regex, the requirement is considered passed. *** NOTE: Use "regex" OR "callback", not both. 'callback': FUNCTION, If a requirement specifies a "callback" then this function will be called with two arguments - the input from the user and value for this requirement - to test whether the current input fulfills the requirement. The function should return the boolean true if it does, false otherwise. 'message': STRING The message to display to the user if they do not meet the requirement. It can contain the special sequence "%V" (without quotes) which will be replaced by the value parameter for this requirement. 'ratings': ARRAY The categories for the ratings, an array of objects. When an input hits the "minScore" for a given rating, its values will be used. NOTE THAT THESE MUST BE IN ORDER BY THE "minScore" ATTRIBUTE. OBJECT: 'minScore': NUMBER, The minimum score to hit to trigger this rating. 'className': STRING, The CSS class to place on the "simplePassMeter" div when this rating is used. 'text': STRING The text to place in the meter UI when this rating is triggered.Built-in Requirements
These requirements are already built-in, just specify them in the 'requirements' block of your options object to turn them on. See the Examples page for details on common usage.
| Name | Description | Sample Code |
|---|---|---|
| minLength | Minimum length | 'minLength': { 'value': 6 } |
| noMatchField | The password cannot match the value of the given field | 'noMatchField': { 'value': '#username' } |
| matchField | The password MUST match the value of the given field | 'matchField': { 'value': '#verify' } |
| letters | Password must contain at least one letter | 'letters': { 'value': true } |
| numbers | Password must contain at least one number | 'numbers': { 'value': true } |
| lower | Password must contain at least one lower-case letter | 'lower': { 'value': true } |
| upper | Password must contain at least one upper-case letter | 'upper': { 'value': true } |
| special | Password must contain at least one special character | 'special': { 'value': true } |
Built-in Ratings
These ratings are already built-in, they will be used unless you override them. See the Examples page for details on specifying your own ratings.
| Score Threshold | Class Name | Meter Text |
|---|---|---|
| 0 | meterFail | You need a stronger password |
| 25 | meterWarn | Your password is a bit weak |
| 50 | meterGood | Your password is good |
| 75 | meterExcel | Great password! |
Style Options
The simplePassMeter UI is completely CSS driven using standard XHTML tags, classes, and IDs. Below is a sample styling, but this is by far not the most you can do.
Your password is good Basic Usage
;Adding in a few custom requirements...
;You can find more examples on my personal site.
Tested Browsers
- Mozilla Firefox 2/3
- Microsoft Internet Explorer 7/8
- Google Chrome
- Opera