Bootstrap Password Strength Meter Example
@samdeering
by bizamajig
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!-- Demo based on: https://github.com/ablanco/jquery.pwstrength.bootstrap -->
<form>
<fieldset>
<legend>Please type in your password</legend>
User: <input type="text" id="username" /><br />
Pass: <input type="password" id="password" />
<div id="messages"></div>
</fieldset>
</form>
JavaScript
jQuery(document).ready(function () {
var options = {
onLoad: function () {
$('#messages').text('Start typing password');
},
onKeyUp: function (evt) {
$(evt.target).pwstrength("outputErrorList");
}
};
$(':password').pwstrength(options);
});
/*
jQuery(document).ready(function () {
"use strict";
var $password = $(':password').pwstrength(),
common_words = ["password", "god", "123456"];
$password.pwstrength("addRule", "notEmail", function (options, word, score) {
return word.match(/^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$/i) && score;
}, -100, true);
$password.pwstrength("addRule", "commonWords", function (options, word, score) {
var result = false;
$.each(common_words, function (i, item) {
var re = new RegExp(item, "gi");
if (word.match(re)) {
result = score;
}
});
return result;
}, -500, true);
});
*/
/*jslint vars: false, browser: true, nomen: true, regexp: true */
/*global jQuery */
/*
* jQuery Password Strength plugin for Twitter Bootstrap
*
* Copyright (c) 2008-2013 Tane Piper
* Copyright (c) 2013 Alejandro Blanco
* Dual licensed under the MIT and GPL licenses.
*
*/
(function ($) {
"use strict";
var options = {
errors: [],
// Options
minChar: 8,
errorMessages: {
password_to_short: "The Password is too short",
same_as_username: "Your password cannot be the same as your username"
},
...