Skip to content
A password strength meter using zxcvbn and Bootstrap.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes
.gitignore
README.md
index.html
password_strength.png
screenshot.PNG
zxcvbn-bootstrap-strength-meter.js

README.md

zxcvbn bootstrap password strength meter

A password strength meter using zxcvbn and Bootstrap.

Hooks the password strength library zxcvbn up to a Boostrap progress bar, packaged in a JQuery plugin.

Demo

Image of demo

##Example usage

<script type="text/javascript">
	$(document).ready(function () {
		$("#StrengthProgressBar").zxcvbnProgressBar({ passwordInput: "#Password" });
	});
</script>
<div class="form-group">
	<label for="Password">Password</label>
	<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
<div class="progress">
	<div id="StrengthProgressBar" class="progress-bar"></div>
</div>

Additional options - userInputs, ratings

<script type="text/javascript">
	$(document).ready(function () {
		var userInputs = new Array();
		userInputs.push("john.smith@test.com");
		$("#StrengthProgressBar").zxcvbnProgressBar({
			  passwordInput: "#Password",
			  userInputs: userInputs,
			  ratings: ["Very Weak", "Weak", "OK", "Strong", "Very strong"]
		});
	});
</script>
You can’t perform that action at this time.