jQuery Plugin For Password Input Enhancement - Strength.js

Strength.js is an useful jQuery password input enhancement that validates/indicates the password strength and provides a function to show/hide password your user input.

Default validation rules:

• At least 8 characters
• At least one number
• At least one uppercase letter
• At least one lowercase letter

Basic Usage:

1. Include jQuery JavaScript library and the jQuery strength.js script at the bottom of your webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="strength.js"></script>

2. Add an unique ID to your password input.

<input id="demo" type="password" name="" value="">

3. Call the plugin on the password input.

$('#demo').strength({
  strengthClass: 'strength', // CSS class
  strengthMeterClass: 'strength_meter', // CSS class
  strengthButtonClass: 'button_strength', // CSS class
  strengthButtonText: 'Show Password',
  strengthButtonTextToggle: 'Hide Password'
});

4. Style the password strength indicator via CSS.

.strength_meter {
  ...
}

.strength_meter div {
  ...
}

.strength_meter div p {
  ...
}

.veryweak {
  ...
}

.weak {
  ...
}

.medium {
  ...
}

.strong {
  ...
}

Change log:

2014-12-16

• avoid 3 passwords being marked as "medium" strength

---

This awesome jQuery plugin is developed by aaronlumsden. For more Advanced Usages, please check the demo page or visit the official website.