Medir la fortaleza de una clave con jQuery

En este artículo vamos a ver como crear una utilidad para los campos password donde se escriben las claves, que permita mostrar al visitante la fortaleza de la clave a medida que la va escribiendo. Es un dinamismo que seguramente habréis visto en infinidad de webs y que fácilmente podemos imitar, para ayudar a nuestros usuarios a elegir claves seguras.

Tendremos un formulario con un campo input password. Con jQuery mostraremos dinámicamente un mensaje al lado del campo con la fortaleza de la clave que haya escrita. A medida que el usuario cambie el contenido del campo, se actualizará el mensaje del lado, mostrando la fortaleza de la nueva clave.

Para disponer de este script primero tendremos que incluir la librería jQuery y el código del plugin en la cabecera o <head> de nuestra página:

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
    jQuery.fn.fortalezaClave = function(){
        $(this).each(function(){
            elem = $(this);
            //creo el elemento HTML para el mensaje
            msg = $('<span>No segura</span>');
            //inserto el mensaje en la página, justo después del campo input password
            elem.after(msg)
            //almaceno la referencia del elemento del mensaje dentro del campo input
            elem.data("mensaje", msg);

            elem.keyup(function(e){
                elem = $(this);
                //recupero la referencia al elemento del mensaje
                msg = elem.data("mensaje")
                //miro la fortaleza
                //extraigo el atributo value del campo input password
                claveActual = elem.attr("value");
                var fortalezaActual = "";
                //saco la fortaleza en función de los caracteres que tenga la clave
                if (claveActual.length < 5){
                    fortalezaActual = "No segura";
                }else{
                    if(claveActual.length < 8){
                        fortalezaActual = "Medianamente segura";
                    }else{
                        fortalezaActual = "Segura";
                    }
                }
                //cambio el texto del elemento mensaje para mostrar la fortaleza actual
                msg.html(fortalezaActual);
            });
        });
        return this;
    }

    //cuando la página esté lista, cargo la funcionalidad del plugin sobre el elemento password
    $(document).ready(function(){
        $("#clave").fortalezaClave();
    });
</script>

El código que hay dentro del «jQuery.fn.fortalezaClave» sería el plugin para medir la fortaleza de una contraseña. Después, el documento o página estará listo para que cuando se vaya escribiendo dentro del campo con id=»clave» iremos llamando a la función o plugin «fortalezaClave».

El script solo mide la fortaleza de las claves mediante su longitud, así que la programación del plugin se podría o debería mejorar o ampliar según las necesidades.

La visualización de la fortaleza se puede mejorar con técnicas CSS.

El código HTML que deberemos tener en nuestro <body> podría ser algo como lo siguiente:

<form>
<p>
Clave:<br />
 <input type="password" name="clave" id="clave">
</p>
</form>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(2 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Una respuesta a “Medir la fortaleza de una clave con jQuery”

  1. call girls Paris dice:

    Vous avez terminé il ya quelques bons points. J’ai fait une recherche sur le thème et constaté que la majorité des personnes auront le même avis avec votre blog.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre