jQuery plugin: Password Validation
This plugin extends the jQuery validation plugin, providing two components:
- A function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional).
- A custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. The text displayed can be localized.
In its simplest form, the rating looks like this:
You can easily customize the appearance of the strength meter and localize the messages and integrate it into existing forms.
To use the plugin, add a class “password” to your input, as well as the base markup for the strength meter, wherever you want to display it in your form:
<form id="register">
<label for="password">Password:</label>
<input class="password" name="password" id="password" />
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</form>And apply the validation plugin to the form:
$(document).ready(function() {
$("#register").validate();
});You can override $.validator.passwordRating with your own implementation for a different rating approach. Or override $.validator.passwordRating.messages to provide other messages, eg. localized.
Current version: 1.0.0
License: MIT/GPL
Files:
Dependencies
Required
Support
- Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “validatepassword”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
