Blog Reacción Estudio

¡Tu zona de aprendizaje!

Asignar evento a un elemento generado dinámicamente con jQuery

Comprobar la fuerza de la contraseña introducida con jQuery

A la hora de crear un formulario para el registro de usuarios, podemos añadir el siguiente código que se encarga de validar la fuerza de la contraseña que el usuario ha insertado.

El código es el siguiente:

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('Más caracteres.');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Fuerte!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Media!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Débil!');
     }
     return true;
});

Y el html:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

Y así de sencillo, cada vez que el usuario escriba un caracter en el campo de texto, la función se ejecutará y mostrará en el span la fuerza que tiene la contraseña.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR