test

HTML

<div class="form-group password">
                        <input class="form-control" id="password" type="password" name="password" maxlength="32" placeholder="Password" required>
                        <meter min="0" max="3" optimum="1" low="1.5" high="2.5" value="0" id="password-strength-meter"></meter>
                        <div class="help-block with-errors" id="password-warning"></div>
                    </div>

CSS

meter {
    -moz-appearance: none;
    appearance: none;

    margin: 0 auto 1em;
    width: 50%;
    height: 0.9em;

    background: none;
    background-color: #dfdfdf;
    border-radius: 15px;
}

meter::-webkit-meter-bar {
    background: #dfdfdf;
    border-radius: 15px;
}
meter::-webkit-meter-optimum-value{
    background: #ef3e36;
    border-radius: 15px;
}
meter::-webkit-meter-suboptimum-value{
    background: #ffcb4e;
    border-radius: 15px;
}
meter::-webkit-meter-even-less-good-value{
    background: #4ca41d;
    border-radius: 15px;
}

meter:-moz-meter-bar {
    background: #dfdfdf;
    border-radius: 15px;
}
meter:-moz-meter-optimum::-moz-meter-bar{
    background: #ef3e36;
    border-radius: 15px;
}
meter:-moz-meter-sub-optimum::-moz-meter-bar{
    background: #ffcb4e;
    border-radius: 15px;
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{
    background: #4ca41d;
    border-radius: 15px;
}

JavaScript

$(document).ready(function(){
    $('#password').on("input paste",function(){
        password();
    });
});
 function password(){

    var password = $('#password').val();

    if((/[A-Z]+/.test(password) && /[a-z]+/.test(password) && /[\d\W]/.test(password) && /\S{8,}/.test(password))||(/[a-z]+/.test(password) && /[\d]/.test(password) && /[\W]/.test(password) && /\S{8,}/.test(password))){
        $('#password-strength-meter').val(3);
        $('#password-warning').text("Strong password!");
    }
    else if(/[a-z]+/.test(password) && /[\d]/.test(password) && /\S{8,}/.test(password)){
        $('#password-strength-meter').val(2);
        $('#password-warning').text("Good password!");
    }
    else if((/[a-z]+/.test(password) && /\S{8,}/.test(password)) || (/[A-Z]+/.test(password) && /\S{8,}/.test(password)) || ((/[a-z]+/.test(password) && /[A-Z]+/.test(password) && /\S{8,}/.test(password)))){
        $('#password-strength-meter').val(1);
        $('#password-warning').text("Weak password");
    }
    else if(password === ""){
        $('#password-strength-meter').val(0);
    }

}