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>
Autor
¿Buscas trabajo de programador?
Una respuesta a “Medir la fortaleza de una clave con jQuery”
Deja una respuesta
57 artículos que te podrían interesar
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.