SummArg | Cursos y recursos para webmasters

14/04/2012

Formulario con verificación de contraseña segura con jQuery

En webdesignerdepot publicaron un tutorial paso por paso para lograr un formulario de registro muy sencillo y moderno, detallando el HTML, el CSS y finalmente el código jQuery. En este tutorial trabajamos con atributos HTML5 para el formulario, mas específicamente para el campo contraseña:

<label for="pswd">Password:</label>
<span><input id="pswd" type="password" name="pswd" /></span>

También agregaremos un contenedor en donde iremos mostrando el estado de validez de nuestra contraseña, si cumple o no con todos los requisitos, a medida que el usuario ingresa caracteres.

<div id="pswd_info">
 <h4>La contase&ntilde;a debe cumplir los siguientes requisitos:</h4>
 <ul>
 <li id="letter" class="invalid">Debe tener al menos <strong>una letra</strong></li>
 <li id="capital" class="invalid">Debe tener al menos <strong>una letra may&uacute;scula</strong></li>
 <li id="number" class="invalid">Debe tener al menos <strong>un n&uacute;mero</strong></li>
 <li id="length" class="invalid">Debe tener al menos <strong>8 caracteres</strong></li>
 </ul>
</div>

Acto seguido debemos utilizar jQuery para que cada vez que el usuario ingrese un nuevo caracter en el campo de la contraseña, vea si la contraseña final cumple con las siguientes condiciones:

  • Posee al menos una letra
  • Posee al menos una letra mayúscula
  • Posee al menos un número
  • Tiene al menos ocho caracteres de longitud.

Si la condición se cumple, entonces en nuestro contenedor #pswd_info debemos marcar como “valid”, sino debemos mostrar los items “invalid”. También añadiremos dos reglas mas: cuando el campo esté seleccionado (:focus) mostramos el contenedor con los mensajes de error, pero cuando no esté seleccionado (:blur) lo tenemos que ocultar.

Al iniciar dicho contenedor debe ser invisible, lo cual lo podemos hacer vía CSS (también podríamos hacerlo vía jQuery).

#pswd_info {
 display:none;
 }

Antes que nada necesitamos agregar jQuery a nuestro proyecto, y también linkearemos un archivo que crearemos luego llamado script.js. Entre etiquetas <head> agregamos:

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="script.js"></script>

Comenzamos a editar el archivo script.js y lo primero que añadiremos son los eventos “disparadores” (triggers).

$(document).ready(function() {
 $('input[type=password]').keyup(function() {
 // keyup code
 });
 $('input[type=password]').focus(function() {
 // focus code
 });
 $('input[type=password]').blur(function() {
 // blur code
 });
 });

Keyup se dispara cuando el usuario presiona cualquier tecla dentro del campo contraseña,  Focus se dispara cuando el campo “password” es seleccionado por el usuario y Blur cuando el campo es des-seleccionado.

jQuery nos permite “encadenar” estos eventos todos juntos en vez de tener que tipearlos uno por uno, así que nuestro código puede ser reformulado de la siguiente forma:

$(document).ready(function() {
 $('input[type=password]').keyup(function() {
 // keyup code
 }).focus(function() {
 // focus code
 }).blur(function() {
 // blur code
 });
 });

Mostrar y ocultar en jQuery es muy simple, bastará con utilizar las funciones show() y hide(). Dijimos que queríamos mostrar el campo cuando era seleccionado y ocultarlo cuando esté des-seleccionado.

$(document).ready(function() {
 $('input[type=password]').keyup(function() {
 // keyup code
 }).focus(function() {
 $('#pswd_info').show();
 }).blur(function() {
 $('#pswd_info').hide();
 });
 });

Ahora nos queda ir mostrando los requisitos que aún no se cumplen (marcados con class “invalid” en el html) en la contraseña a medida que el usuario tipea. Para esto utilizamos if (condición) { acción si se cumple la condición } else { acción si no se cumple }.

$('input[type=password]').keyup(function() {
 // declaramos la variable
 var pswd = $(this).val();
 // validamos la longitud de carateres
if ( pswd.length < 8 ) {
 $('#length').removeClass('valid').addClass('invalid');
} else {
 $('#length').removeClass('invalid').addClass('valid');
}
// validamos la letra
if ( pswd.match(/[A-z]/) ) {
 $('#letter').removeClass('invalid').addClass('valid');
} else {
 $('#letter').removeClass('valid').addClass('invalid');
}
l/validamos la letra mayuscula
if ( pswd.match(/[A-Z]/) ) {
 $('#capital').removeClass('invalid').addClass('valid');
} else {
 $('#capital').removeClass('valid').addClass('invalid');
}
//validamos el numero
if ( pswd.match(/d/) ) {
 $('#number').removeClass('invalid').addClass('valid');
} else {
 $('#number').removeClass('valid').addClass('invalid');
}

Ver tutorial completo | Ver Demo | Descargar Password Verification (632)

Dejar un comentario