Bootstrap jQuery Password Meter Demo

jQuery4u @samdeering

by jquery4u

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>
<script src="http://www.jquery4u.com/demos/basic-jquery-validation-form/jquery.validate.min.js"></script>
<form action="#" method="post" id="rego-form" name="rego-form" class="form-horizontal" autocomplete="off">
    <div class="control-group">
        <label class="control-label" for="name">Full Name</label>
        <div class="controls">
            <div class="input-prepend"> <span class="add-on"><i class="icon-user"></i></span>
                <input type="text" class="input-xlarge" placeholder="Enter your full name" id="name" name="name" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
             <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span>
            <input type="text" placeholder="Enter your email address" id="email" name="email" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
             <div class="input-prepend"> <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" placeholder="Enter your password" id="password" name="password"  />
                 <div id="password-strength-meter" for="new_password-newPassword-passwordReset" class="short">
<strong class="strength">Too short</strong>
<span class="indicator">Too short</span>
</div>
            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn">Submit</button>
        </div>
    </div>
</form>

CSS

#password-strength-meter {
display: none;
vertical-align: top;
background: url('https://www.linkedin.com/scds/common/u/img/sprite/sprite_strength_meter_v2.png') repeat-x left 20px;
color: #9EA0A3;
font-size: 11px;
font-weight: bold;
height: 15px;
overflow: hidden;
padding: 3px 0 4px;
position: relative;
width: 208px;
}

JavaScript

/* 1xy5u1e6ui477gs3xlsjqc6f4 */

if (LI && typeof (LI.define) == "function") {
    LI.define("PasswordStrength")
}
LI.PasswordStrength = function(a, b) {
    var j = this, d, i = {num3: /(.*[0-9].*[0-9].*[0-9])/,symbols2: /(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/,charUpperLower: /([a-z].*[A-Z])|([A-Z].*[a-z])/,chars: /([a-zA-Z])/,nums: /([0-9])/,symbols: /([!,@,#,$,%,^,&,*,?,_,~])/,numsOnly: /^\w+$/,charsOnly: /^\d+$/}, e = {}, k = (function() {
        var m = a.childNodes, n = a.childNodes.length, o = null, l = 0;
        for (; 
        l < n; 
        l++) {
            if (m[l].className == "strength") {
                return m[l]
            }
        }
    }());
    b.text = b.text || {};
    e = {"tooShort": b.text["tooShort"] || "","weak": b.text["weak"] || "","fair": b.text["fair"] || "","strong": b.text["strong"] || ""};
    if (typeof (a) != "object") {
        return false
    }
    if (a.getAttribute("for") == null || !document.getElementById(a.getAttribute("for"))) {
        return false
    }
    var c = document.getElementById(a.getAttribute("for"));
    if (c.addEventListener) {
        c.addEventListener("keyup", function() {
            f(c.value)
        }, false)
    } else {
        if (c.attachEvent) {
            c.attachEvent("onkeyup", function() {
                f(c.value)
            }, false)
        }
    }
    function f(l) {
        d = 0;
        d += l.length * 4;
        d += (g(1, l).length - l.length) * 1;
        d += (g(2, l).length - l.length) * 1;
        d += (g(3, l).length - l.length) * 1;
        d += (g(4, l).length - l.length) * 1;
        if (l.match(i.num3)) {
            d += 5
        }
        if (l.match(i.symbols2)) {
            d += 5
        }
        if (l.match(i.charUpperLower)) {
            d += 10
        }
        if (l.match(i.chars) && l.match(i.nums)) {
            d += 15
        }
        if (l.match(i.symbols) && l.match(i.nums)) {
            d += 15
        }
        if...