jQuery Password Validation

The jQuery Password Validation plugin extends the jQuery Validate plugin and provides two components:
A feature that rates password-related factors: such as the mixing of uppercase and lowercase letters, the mixing of characters (digits, special characters), length, and similarity to the username (optional).
A custom validation plugin method that uses the rating feature to display password strength. The displayed text can be localized.

You can easily customize the appearance of the strength display, localize the message display, and integrate it into existing forms.

The current version of this plugin is 1.0.0.

Usage

To use the Password Validation plugin, add a class "password" to the input, and add the basic markup for displaying the strength where it needs to be shown in the 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>

Apply the Validate plugin to the form:

$(document).ready(function() {
  $("#register").validate();
});

You can override $.validator.passwordRating to implement different rating methods. Or override $.validator.passwordRating.messages to provide other messages, such as localization.

Demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required to be the same as #other</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<br/>
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<br>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});
</script>
</body>
</html>

Other Extensions