Validar contraseña en un formulario con jQuery

Publicada el por

Una contraseña, debe cumplir con un formato para ser segura. A la hora de loguinarnos, de registrarnos o de recuperar la contraseña, debemos asegurarnos que las contraseñas que facilitan los usuarios, cumplen con estas normas. Validar contraseña en un formulario con jQuery, no es fácil.

Empecemos con las normas mínimas que una contraseña debe cumplir:

  • Tener entre 8 y 12 caracteres
  • Tener caracteres alfanúmericos (de a-z, de A-Z y de 0-9)
  • Tener caracteres especiales (=_-:.)

Con esto, tendríamos una contraseña bastante buena.

El objetivo, es validar antes de enviar el formulario, que la contraseña cumple estas normas. Para ello, utilizaremos el plugin de jQuery Validate. En el siguiente enlace tenéis un tutorial de cómo validar un formulario antes de enviarlo con jQuery Validate.

Un vez reviséis el artículo anterior, nos centramos en validar una contraseña con las normas anteriormente explicadas.

Cargamos las librerías necesarias

Necesitamos jQuery y jQuery validate

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.validate.js"></script

Creamos formulario

Pongo el formulario más complicado a la hora de tratar validaciones de contraseñas: el formulario de registro. Donde debemos insertar una contraseña, y en otro campo confirmar esa contraseña. Fijaos en la asignación de Id al formulario y a los campos de las contraseñas:

<form id="formregistro" action="enlace/destino" method="post">
...
<input type="password" id="contrasena" name="contrasena" placeholder="Contraseña" />
<input type="password" id="contrasenaconfirmar" name="contrasenaconfirmar" placeholder="Contraseña" />
...
<button type="submit">Enviar</button>
</form>

Ya tenemos el formulario con el ID correspondiente, y los campos con sus Id y sus Name.

Código validación de las contraseñas

Ahora toca el turno de jQuery. Veamos el código, y luego os indico las claves.

$(function () {

  $.validator.addMethod("passwordcheck", function(value) {
    return /^[a-zA-Z0-9!@#$%^&()=[]{};':"\|,.<>\/?+-]+$/.test(value) 
    && /[a-z]/.test(value) // has a lowercase letter 
    && /\d/.test(value)//has a digit 
    && /[!@#$%^&()=[]{};':"\|,.<>\/?+-]/.test(value)// has a special character
  },"La contraseña debe contener de 8 a 15 carácteres alfanuméricos (a-z A-Z), contener mínimo un dígito (0-9) y un carácter especial (_-=)."  
  );

  $("#formregistro").validate({
    rules: {
      contrasena: {required:true,minlength:8,maxlength:15,passwordcheck:true },
      contrasenaconfirmar: {required:true,equalTo:"#contrasena",passwordcheck:true }
    },
    messages: {
      contrasena: "Formato contraseña incorrecto.",
      contrasenaconfirmar: "Formato contraseña incorrecto."
    },
    errorLabelContainer: "dt",
    wrapper: "dd"
  });
});

Si os fijáis, y es la clave, declaramos la funcion passwordcheck (código en negrita), que checkea que un campo tenga los caracteres alfanuméricos, minúsculas, un dígito y un caráctr especial. Lo hacemos con la validación de expresiones regulares.

Esta función es llamada posteriormente en el validate() en los campos contrasena y contrasenaconfirmar (código en negrita). De esta manera, validamos el campo para con la función que hemos creado.

Por otro lado, podéis ver tmabién (código en negrita), que hemos añadido equalTo: «#contrasena», esta condición hace que tanto el campo contrasena como el campo contrasenaconfirmar deban ser iguales.

Pues con ésto, ya tendríamos la posibilidad de validar contraseñas seguras en nuestras aplicaciones antes de crearlas, modificarlas o usarlas.

Espero que os haya sido de utilidad este artículo de cómo Validar contraseña en un formulario con jQuery.

Más información