Blog Reacción Estudio

¡Tu zona de aprendizaje!

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.