Con la intención de practicar con el framework Javascript jQuery vamos a tratar un nuevo ejemplo de desarrollo de un plugin que podrá venirnos bien en los formularios de registro de usuario. Se trata de 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.

Antes de comenzar conviene decir que para seguir las explicaciones de esta práctica con jQuery tenemos que tener unos conocimientos básicos sobre el framework, que podremos obtener con la lectura del Manual de jQuery. Además, será extremadamente recomendable haber leído y asimilado la parte donde explicamos la creación de plugins, pues vamos a dar por sabidos esos conocimientos.

Así pues, veamos cuáles son los objetivos de este artículo. 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.

Código HTML con el campo password

Podemos comenzar viendo el código HTML necesario para hacer nuestro ejemplo.

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

Como podemos ver es extremadamente sencillo. Lo único que tenemos es el campo input de tipo password, al que le hemos colocado un identificador para poder acceder a él desde Javascript.

Código del plugin jQuery para mostrar la seguridad de la clave

El plugin que vamos a ver contendrá básicamente dos partes, la primera en la que generaremos dinámicamente un elemento HTML al lado del campo password, donde aparecerá el mensaje que nos indique la fortaleza de la clave actual. Para facilitarnos las cosas, almacenaremos una referencia a ese elemento "mensaje" de fortaleza, dentro del propio objeto jQuery del campo input.

La segunda parte será donde definamos el evento de teclado necesario para conseguir que el mensaje de fortaleza de la clave se actualice dinámicamente, a medida que el usuario cambie el contenido del campo password. Dentro de este evento recuperaremos el objeto jQuery del elemento mensaje y actualizaremos su contenido para mostrar cómo de fuerte es la clave.

Para decidir en nuestro script lo segura que sea la clave en este ejemplo simplemente contaremos el número de caracteres de la clave. A mayor número de caracteres, más segura será la clave. Por tanto, el objetivo de este artículo es mostrar cómo podemos hacer la parte de jQuery para crear los elementos y eventos para producir los comportamientos dinámicos en el cliente, no tanto el análisis de la cadena de texto que haya en el campo password para decidir si la clave es segura o no.

Veamos entonces el código de este plugin.

jQuery.fn.fortalezaClave = function(){
   $(this).each(function(){
      elem = $(this);
      //creo el elemento HTML para el mensaje
      msg = $('<span class="fortaleza">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;
}

La funcionalidad ha quedado implementada en el plugin y hemos comentado el código para que se pueda entender mejor. Gracias a este plugin disponemos de un nuevo método en los objetos jQuery llamado fortalezaClave() que se puede invocar sobre los elementos password (en realidad valdría sobre cualquier campo input de formulario) para mostrar la seguridad de una clave.

Ahora, para poner en funcionamiento esta utilidad, tenemos que hacer una llamada al método del plugin fortalezaClave() sobre el elemento password que tengamos en el formulario.

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

Eso es todo, ahora sólo queda poner el enlace al ejemplo en marcha.

Modificación para tratar el caso que no haya nada escrito en el campo clave

Este ejemplo se puede modificar mínimamente para tratar el caso de que no haya escrito nada en el campo password del formulario, para no liar al usuario mostrando que "la clave no es segura" cuando realmente no ha escrito nada todavía en el campo password.

Además, henos cambiado la estructura de control para resolver la seguridad, que ya empieza a resultar un poco complicada con tanto if anidado que tendríamos que poner, para utilizar la estructura de control switch-case, que nos vendría mucho mejor tal como está este ejemplo.

El código del plugin quedaría de esta manera.

jQuery.fn.fortalezaClave = function(){
   $(this).each(function(){
      elem = $(this);
      msg = $('<span class="fortaleza">Escribe la clave</span>');
      elem.after(msg)
      elem.data("mensaje", msg);
      
      elem.keyup(function(e){
         elem = $(this);
         msg = elem.data("mensaje")
         claveActual = elem.attr("value");
         var fortalezaActual = "";
         console.log(claveActual.length)
         switch (claveActual.length){
            case 0:
               fortalezaActual = "Escribe la clave";
               console.log(aki)
               break;
            case 1:
            case 2:
            case 3:
               fortalezaActual = "La clave debe contener al menos 4 caracteres";
               break;
            case 4:
            case 5:
               fortalezaActual = "Clave no segura";
               break;
            case 6:
            case 7:
               fortalezaActual = "Clave medianamente segura";
               break;
            default:
               fortalezaActual = "Clave segura";
         }
         msg.html(fortalezaActual);
      });
   });
   return this;
}

Esta segunda variante la podemos ver también en marcha en este enlace.

Esperamos que haya resultado interesante e ilustrador este plugin jQuery para mostrar la seguridad de una clave.