Refleja la calidad de un password en un progress de Bootstrap

Si estás buscando la manera de reflejar la calidad de un password que un usuario está introduciendo en un formulario, te dejo el código para que lo utilices cuando quieras.

¿Qué necesitamos?

Las librerías por supuesto de bootstrap y jquery, bootstrap pq con su framework nos dá una serie de componentes que podemos utilizar facilmemte y juqery para manejar tanto bootstrap como el siguiente código.

También necesitaremos un campo input donde vamos a introducir nuestro password y un componentes progress.

Campo input:

<input name="campo_password" type="text" id="campo_password" class="form-control" placeholder="Contraseña">

Cómo podréis ver le hemos metido ya la clase de bootstrap para tomar su diseño y hemos añadido el atributo placeholder para que aparezca la descripción del campo dentro, no es necesario.

Control progress bar:

<div class="progress">
<div id="progress-bar" class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Nuestro código de script:

<script>
    $("#campo_password").keyup(function () {
        $quality = 0;

        //Revisamos la calidad del password.
        var password = $("#campo_password").val();

        if (password.length >= 6) $quality += 20
        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) $quality += 20
        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) $quality += 20
        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) $quality += 20
        if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) $quality += 20

        $('#progress-bar').css('width', $quality + '%');
        $('#progress-bar').attr('aria-valuenow', $quality);
        switch (true) {
            case ($quality == 0):
                $('#progress-bar').removeClass()
                $('#progress-bar').addClass('progress-bar bg-danger');
                break;
            case ($quality > 40 && $quality < 90):
                $('#progress-bar').removeClass()
                $('#progress-bar').addClass('progress-bar bg-warning');
                break;
            case ($quality > 90):
                $('#progress-bar').removeClass()
                $('#progress-bar').addClass('progress-bar bg-success');
                break;
            default:
                $('#progress-bar').removeClass()
                $('#progress-bar').addClass('progress-bar bg-danger');
                break;
            }
    });
</script>