Como Verificar si 2 Contraseñas Coinciden o son Iguales con JavaScript

4 minuto(s)

Demo Github

Personalmente creo que la validación del lado del servidor es más segura y es en donde debemos enfocar nuestra atención a la hora de verificar los datos, sobre todo si son contraseñas, pero en algunas ocasiones necesitamos hacer la validación en la vista el usuario, en este tutorial te enseñaré como hacerlo con JavaScript.

Antes de continuar te invito a leer los siguientes artículos:

Y también te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Como Leer un archivo JSON en Android (Android Studio 3.6.1 + Java) – Parte 2 (Final) 
En JavaScript existen muchas formas de validar la igualdad de las contraseñas, yo te compartiré una manera.

Vista HTML

Antes del formulario voy mostrar los mensajes de validación, agrego 3 elementos un div con id msg, en este div mostraremos los mensajes de validación. Debajo colocaré 2 mensajes de validación, les he colocado el nombre de clase ocultar para que no se vean a primera vista. 


Mi formulario va estas compuesto de 3 campos: nombre, pass1 y pass2, estos 2 últimos son los campos que validaré. 

Cuando presionamos el botón para procesar el formulario, este llama a la función JavaScript  verificarPasswords() que se encarga de validar la igualdad de las contraseñas. 


Para la vista estoy usando Bootstrap 4, ahora pasemos a ver los estilos CSS.

Estilos CSS

Los mensajes de validación usarán las siguientes clases CSS, estas las uso para ocultar y mostrar los mensajes cuando es necesario. 


Por defecto los mensajes de validación usan la clase ocultar, pero si es necesario mostrarse uno de estos mensajes, pues le aplicamos la clase mostrar con JavaScript, veamos mejor como trabajan las clases CSS en el código JavaScript. 

JavaScript

En el formulario al presionar el botón para procesar el formulario llamamos a la función verificarPasswords(), entonces creamos esta función. 


Lo primero que hago es obtener los valores de los campos pass1 y pass2.


Luego mediante el uso de sentencias ifelse realizo la validación (En el código he colocado comentarios, para explicar que hace cada porción de código). 


A continuación el código completo de la función verificarPasswords() 


Por ejemplo si las contraseñas no son iguales, mostramos el mensaje correspondiente.

Y si las contraseñas coinciden o son iguales, mostramos el mensaje Las Contraseñas coinciden ! (Procesando formulario … ) 

Al inicio de este tutorial, he colocado una Demo y el repositorio GitHub con el código fuente. 

Conclusión

La validación del lado del cliente ayuda a mejorar la experiencia del usuario, pero siempre es bueno hacer una validación de los datos en el lado del servidor, sobre todo si son contraseñas. 

Nota(s)

  • El código los y pasos mencionados pueden cambiar o quedar obsoletos, esto no depende de nosotros si no de los desarrolladores que dan soporte a JavaScript. 
  • No olvides que debemos utilizar la tecnología para hacer cosas buenas por el mundo.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.