Verificar contraseña segura con jQuery
En este artículo vamos a ver como verificar de forma segura una contraseña con jQuery. En el ejemplo que vamos a ilustrar vamos a querer que la contraseña tenga al menos 8 caracteres donde debe haber al menos un número, una letra y una letra en mayúsculas.
El patrón de contraseña segura podría ser mucho más complejo aportando mucha más seguridad pero para ver un ejemplo ya está más que bien.
Como vemos en la imagen, la idea es que cuando el usuario se disponga a introducir su contraseña, le aparece este tooltip emergente indicándole en cada tecla que pulsa si cumple con uno de los requisitos marcado en color verde y si no lo cumple en rojo. En este caso, hasta que no esté todo en verde no se podrá procesar el formulario.
Para obtener este resultado, dentro del <head> de nuestra página deberemos añadir los estilos necesarios (que podrás descargar del ejemplo en funcionamiento), la librería jQuery y las condiciones que se ejecutan al escribir dentro del campo password:
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(document).ready(function() {
$('input[type=password]').keyup(function() {
// set password variable
var pswd = $(this).val();
//validate the length
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}
//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}
//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});
</script>
En el <body> de nuestra página tendremos un formulario con un input de tipo password:
<label for="pswd">Contraseña:</label> <span><input id="pswd" type="password" name="pswd" /></span>
Y debajo añadiremos un contenedor para mostrar los requerimientos de este campo:
<div id="pswd_info"> <h4>La contraseña debería cumplir con los siguientes requerimientos:</h4> <ul> <li id="letter">Al menos debería tener <strong>una letra</strong></li> <li id="capital">Al menos debería tener <strong>una letra en mayúsculas</strong></li> <li id="number">Al menos debería tener <strong>un número</strong></li> <li id="length">Debería tener <strong>8 carácteres</strong> como mínimo</li> </ul> </div>
Cuando revisemos la hoja de estilo, veréis que este contenedor inicialmente está escondido en display:none para mostrarlo tan solo cuando estemos con el cursor dentro el campo contraseña.
Ver el ejemplo en funcionamiento
Autor
¿Buscas trabajo de programador?
14 respuestas a “Verificar contraseña segura con jQuery”
Deja una respuesta
102 artículos que te podrían interesar
Ver más sobre
[…] validación de contraseña (su seguridad) con jquery o algo parecido? He encontrado este artículo,(http://www.jose-aguilar.com/blog/verificar-contrasena-segura-con-jquery/) pero no me funciona. Y la verdad soy bastante nuevo en el tema de jquery y se hacer 4 cosas y no […]
Gracias Jose Aguilar, me sirvió de mucha ayuda.
graciassssss asd, eres un angel…
https://www.webdesignerdepot.com/2012/01/password-strength-verification-with-jquery/
No se maten pidiendo lo que está en internet.
Esto no es de José Aguilar
Lo pueden encontrar en
http://www.summarg.com/2012/formulario-con-verificacion-de-contrasena-segura-con-jquery/
no tienes por ahi el style.css? seria de gran ayuda
Lo siento pero lo tendría que volver a hacer porque lo perdí en un ataque al servidor
hola, podrias volver a subir el ejemplo? porque me hace mucha falta y tengo mucho interes.
muchas gracias
Hola disculpa las molestias pero ya no lo tenemos disponible por un ataque al servidor…
Hola buen día, pudiste recuperar el script y la hoja de estilo de «Verificar contraseña segura con jQuery” o por lo menos la hoja de estilo para que por favor lo facilites, Gracias.
Lo siento pero lo tendría que volver a hacer porque lo perdí en un ataque al servidor
Hola artista, me gustaria que me pasaras el script completo de «Verificar contraseña segura con jQuery»
Muchas gracias
Ya no lo tengo disponible por un ataque al servidor.
amigo necesito que me ayudes en una duda que tengo, quiero habilita/deshabilitar campos dependiendo de una condición, es decir: si X35 deshabilito ese input.. espero me puedas ayudar