<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<p class="well">#password has type of text instead of password just for testing purposes</p>
<h3>Registration</h3>
<hr>
<div class="row">
<div class="form-group">
<div class="col-sm-6">
<div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="text" class="form-control" name="password"
id="password" placeholder="Password" required data-toggle="popover"
data-content="Enter Password...">
</div>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function(){
//minimum 8 characters
var bad = /(?=.{8,}).*/;
//Alpha Numeric plus minimum 8
var good = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{8,}$/;
//Must contain at least one upper case letter, one lower case letter and (one number OR one special char).
var better = /^(?=\S*?[A-Z])(?=\S*?[a-z])((?=\S*?[0-9])|(?=\S*?[^\w\*]))\S{8,}$/;
//Must contain at least one upper case letter, one lower case letter and (one number AND one special char).
var best = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{8,}$/;
$('#password').on('keyup', function () {
var password = $(this);
var pass = password.val();
var passLabel = $('[for="password"]');
var stength = 'Weak';
var pclass = 'danger';
if (best.test(pass) == true) {
stength = 'Very Strong';
pclass = 'success';
} else if (better.test(pass) == true) {
stength = 'Strong';
pclass = 'warning';
} else if (good.test(pass) == true) {
stength = 'Almost Strong';
pclass = 'warning';
} else if (bad.test(pass) == true) {
stength = 'Weak';
} else {
stength = 'Very Weak';
}
var popover = password.attr('data-content', stength).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement).removeClass('danger success info warning primary').addClass(pclass);
});
$('input[data-toggle="popover"]').popover({
placement: 'right',
trigger: 'focus'
});
})
