💻 Validar FORMULARIO de REGISTRO con JAVASCRIPT
Summary
TLDREn este video tutorial, el instructor Alex Alexander de Alix Sigue Design muestra cómo validar un formulario de registro utilizando JavaScript puro. Comienza explicando la importancia de la validación y luego procede a demostrar cómo verificar si el nombre, el correo electrónico y la contraseña cumplen con ciertos criterios. Utiliza expresiones regulares para validar el formato del correo electrónico y establece restricciones de longitud para el nombre y la contraseña. Además, incluye un sistema de alertas para informar al usuario cuando los campos no cumplen con los requisitos. Finalmente, se enfoca en la importancia de la redundancia en la validación y cómo aplicar estilos CSS para mejorar la experiencia del usuario. El video ofrece una guía práctica y detallada para aquellos que deseen aprender a validar formularios de registro con JavaScript.
Takeaways
- 📝 Se enseña cómo validar un formulario de registro con JavaScript puro.
- 🔑 Se destaca la importancia de la validación de campos como el nombre, el correo electrónico y la contraseña.
- 📈 Se menciona que el nombre debe tener más de seis caracteres.
- 📧 Se utiliza una expresión regular para validar el formato del correo electrónico.
- 🔐 Se indica que la contraseña debe tener al menos ocho caracteres.
- 🚫 Se evita que el formulario se envíe por defecto hasta que la validación es exitosa.
- ✅ Se utiliza la propiedad `value` de los elementos de entrada para obtener sus valores.
- 🌐 Se recomienda inspeccionar el código en Chrome para entender cómo se toman los valores de los inputs.
- 📑 Se sugiere crear una clase `warning` en CSS para mostrar mensajes de validación.
- 🔧 Se utiliza la función flecha en JavaScript para definir la lógica de validación.
- 📝 Se ofrece una guía para entender y utilizar expresiones regulares para la validación de correos electrónicos.
Q & A
¿Qué tipo de validación se enseña en el video?
-El video enseña cómo validar un formulario de registro utilizando JavaScript puro.
¿Por qué se recomienda suscribirse y dar like antes de comenzar?
-Es una práctica común en los videos para fomentar la interacción y el apoyo a los creadores de contenido, aunque no es estrictamente relacionada con la validación del formulario.
¿Cómo se valida que el nombre en el formulario tenga al menos seis caracteres?
-Se utiliza la propiedad 'length' del string para verificar que el valor del nombre sea mayor o igual a seis.
¿Cómo se asegura que el campo de email contenga un formato válido?
-Se utiliza una expresión regular para verificar si el email contiene un carácter '@' seguido de texto y un '.com'.
¿Qué es la 'redundancia' en el contexto de la validación del formulario?
-La 'redundancia' hace referencia a la validación adicional que se podría implementar además de la de HTML para mejorar la seguridad y la precisión del proceso de validación.
¿Por qué se recomienda no confiar únicamente en la validación del lado del cliente (como el JavaScript)?
-La validación del lado del cliente es susceptible de ser manipulada por el usuario, por lo que es importante validar también en el lado del servidor para garantizar la seguridad y la integridad de los datos.
¿Cómo se utiliza la clase 'warning' en el HTML para mostrar mensajes de alerta?
-La clase 'warning' se aplica a un párrafo que se utiliza para mostrar mensajes de alerta en caso de que los datos ingresados no sean válidos.
¿Cómo se obtiene el valor de un elemento del formulario utilizando JavaScript?
-Se utiliza el método 'document.getElementById' o 'document.querySelector' seguido de '.value' para obtener el valor de un elemento específico.
¿Qué evento de JavaScript se utiliza para detectar cuando se envía el formulario?
-Se utiliza el evento 'submit' para ejecutar una función cuando se envía el formulario.
¿Cómo se implementa la lógica de validación para la contraseña en el formulario?
-Se verifica que la longitud de la contraseña sea mayor a seis caracteres y se utiliza una expresión regular para asegurar que cumpla con los criterios de seguridad.
¿Qué es una expresión regular y cómo se utiliza en la validación del email?
-Una expresión regular es una secuencia de caracteres que forma un patrón utilizado para buscar coincidencias en strings. Se utiliza para validar que el formato del email sea el correcto, es decir, que contenga un texto antes y después de un '@' seguido de un '.com'.
¿Cómo se puede mejorar la comprensión de las expresiones regulares y su implementación?
-Se sugiere estudiar más a fondo el tema de las expresiones regulares y posiblemente solicitar un capítulo específico en el futuro para tratar el tema con más detalle.
Outlines
😀 Validación de Formulario con JavaScript
En el primer párrafo, se presenta el tema del video, que es la validación de un formulario de registro utilizando JavaScript puro. Se menciona la importancia de suscribirse y dar like antes de comenzar. Se habla sobre la validación de campos específicos como el nombre, el correo electrónico y la contraseña, destacando las condiciones que deben cumplir (nombre mayor a seis caracteres, correo electrónico con formato válido y contraseña mayor a seis caracteres). Además, se aborda la idea de mejorar la seguridad y la redundancia en la validación, y se sugiere la creación de un efecto de recordatorio para los campos que requieren atención.
😉 Análisis de la Longitud del Nombre y Validación del Email
El segundo párrafo se enfoca en la validación del campo de nombre, mostrando cómo se puede detectar la longitud del texto ingresado. Se utiliza el método `.length` para verificar si el nombre tiene más de cuatro caracteres y se proporciona un ejemplo de cómo se puede mostrar una alerta al usuario si el nombre es demasiado corto. Luego, se discute la validación del campo de correo electrónico, utilizando expresiones regulares para verificar si el formato es el correcto. Se ofrece una guía para entender las expresiones regulares y se demuestra cómo se puede implementar la validación en el código.
😐 Validación de Contraseña y Manejo de Errores
El tercer párrafo continúa con la validación del formulario, pero en este caso se centra en la contraseña. Se establece que la contraseña debe tener al menos ocho caracteres para ser considerada válida. Se muestra cómo se puede utilizar una expresión regular para validar la estructura de la contraseña y se discute la implementación de un mecanismo que muestre un mensaje de alerta si la contraseña no cumple con los requisitos. Además, se aborda el manejo de errores y se sugiere reiniciar los valores del formulario antes de que el usuario haga clic en enviar.
😇 Expresiones Regulares y Siguientes Pasos
El cuarto y último párrafo concluye el tema del video introduciendo el concepto de expresiones regulares como una herramienta para encontrar patrones en cadenas de texto. Se mencionan diferentes métodos como `test`, `match` y `search` que se pueden utilizar con expresiones regulares. El presentador ofrece su nombre y el canal para suscriptores interesados en aprender más sobre este tema. Finalmente, se invita a la audiencia a suscribirse, dar like y comentar si desean un capítulo específico sobre expresiones regulares.
Mindmap
Keywords
💡Validación de formulario
💡JavaScript
💡Caracteres
💡Correo electrónico
💡Contraseña
💡Expresiones regulares
💡HTML
💡Eventos de JavaScript
💡Template strings
💡DOM (Documento Objeto Modelo)
💡Alertas
Highlights
Bienvenidos a un nuevo video de Alex y Design, donde aprenderán a validar un formulario de registro con JavaScript puro.
Se enseña cómo validar que el campo de nombre tenga más de seis caracteres.
Se muestra cómo eliminar la validación de HTML para aplicar la validación con JavaScript.
Se explica que la validación de JavaScript es más segura y cómo evitar la manipulación del formulario.
Se detalla cómo crear una clase 'warning' en CSS para mostrar mensajes de validación.
Se describe cómo utilizar `document.getElementById` para interactuar con elementos del formulario.
Se muestra cómo obtener y manipular el valor de los inputs del formulario.
Se discute la validación del formato de correo electrónico utilizando expresiones regulares.
Se proporciona una guía para entender y utilizar expresiones regulares en JavaScript.
Se muestra cómo prevenir el envío del formulario por defecto y manejar el evento 'submit'.
Se detalla cómo utilizar la propiedad `length` para validar el tamaño del nombre y la contraseña.
Se implementa una lógica para mostrar un mensaje de alerta si el nombre o la contraseña no son válidos.
Se discute la validación de que la contraseña tenga al menos 8 caracteres.
Se muestra cómo utilizar template strings para concatenar variables en HTML.
Se explica cómo reiniciar los valores de validación cuando se hace clic en el botón de envío.
Se ofrece una guía para estudiar expresiones regulares y su importancia en la validación de datos.
Se invita a los espectadores a suscribirse y dejar un like si quieren un capítulo dedicado a las expresiones regulares.
Transcripts
hola qué tal y bienvenidos a alix sigue
design tanto me vieron alexander el día
de hoy te voy a enseñar como validar un
formulario de registro con javascript
puro así es javascript puro así que
antes de empezar suscríbete dan like
porque comenzamos
bueno qué tal te voy a enseñar en esta
vez como validar un formulario de
registro como puedes ver si yo le doy el
nombre lo quita porque debe ser mayor a
seis caracteres o igual si yo le doy
otro ya quitarle la parte del nombre si
yo pongo en este caso un email
email jota puntocom ya me quita la parte
del email y si yo pongo una password o
una contraseña yo pongo por ejemplo la
contraseña
jajajajaja no me la vale ahora sí porque
no me la valía porque debe ser mayor a
seis caracteres y yo me parece que puse
cinco ahora voy a ir a parte del del
html y si bien recuerdas
y te voy a explicar algo en esto real
solamente vamos a validar con javascript
no vamos a balín no vamos a crear el
formulario desde cero si quiero crear el
formulario desde cero te recomiendo aquí
en la tarjeta desde el vídeo la parte de
arriba
en el capítulo pasado hicimos el
tutorial desde cero y si bien sabes para
tener un efecto bastante genial tuvimos
la parte de recuerdes y qué pasa que con
recuerda tenemos este efecto solamente
lo pido que lo quites mientras es la
validación después lo puedes volver a
poner y por qué porque no solamente me
hacía pongo suscribirte recuerda es lo
que nos va a hacer es pedir completar el
campo en donde pongo recuerde y si es
así porque yo hago la validación bueno
por más seguridad porque si yo puedo
poner aquí puedo quitar guardias mira
puedes ver y solamente a pedir el
siguiente espacio que tiene recuadros
pero yo se lo puedo quitar como puedes
ver por medio de un inspector de
elementos y ya no va a pedir nada y qué
pasa si pasa eso valga la redundancia
pues tenemos la validación con html lo
puede sentar a ser incluso en varios
portales para ver si en el recuadro y
puedes quitarse los previos tienen
validaciones externas porque es lo que
tienen que hacer
ok así que voy a quitar en este caso
recuadros y voy a borrar todo lo que
tengo aquí lo que voy a pasar a hacer es
primero que bueno antes que nada te voy
a decir nosotros cambios también en la
parte de abajo de submit agregue una
clase que se llama warning y es un
párrafo que tiene la clase warning
cellay de warnings porque vamos a ocupar
esos hay de él hay de forma que de tener
el form
que debe tener el input donde vamos a
poner el nombre el email que debe tener
el limpio donde vamos a poner el email
el aid y password donde vamos a tener el
input dónde vamos a poner la password
valga la redundancia y en estilos vamos
a crear una clase warning con el wii de
200 píxeles el text align center el
margin auto el color y el padding top ok
una vez
haciendo todo esto voy a proceder a
generar el código de javascript
voy a crear una constante que sea mi
nombre y va a ser igual al document
punto get element by haití con el
atributo name lleva a tomar ahora el
nombre mira si yo voy aquí hay script
antiguo al chrome y pon inspeccionar y
en la consola doy por ejemplo a lo que
sea mi nombre lo que me va a arrojar es
el input y si ahora agregó un nombre
punto value no va a arrojar
absolutamente nada pero si yo aquí pongo
hwan y vuelvo a poner otra vez nombre
punto value lo que va arrojar es el
valor juan como puedes ver y así podemos
obtener todos los valores de los
elementos mira si yo pongo ahora el
valor de gmail y ahora obtengo email y
aquí obtengo password perdón y aquí no
menos variable que se me pasó el aid y
nombra password y yo empiezo a llenar
todos los caracteres y ahora pongo
nombre punto value como puedes ver email
punto value me da el nombre del email y
pass punto value me da su valor
actualmente éste sea así porque no está
validado
ya cuando no no ya no se pone así cuando
está de esta manera contiene una arroba
y después texto después del arroba y por
qué pues porque en este caso es un
impuesto tipo email y debe tener una
arroba y después un texto para realmente
ser un nivel un email válido ok ahora lo
que voy a hacer es también tomar otras
otras variables como en este caso el
foro que va a tener un documento punto
que del mba jaidy del foro y después una
constante para párrafo
que va a tener en este caso un documento
punto que tiene el mando de que sea
warning ok ahora vamos a decirle que
cuando al forn vamos a ver vamos a
escuchar un evento de esa parte y es
cuando se envíe cuando sea la acción
submit
quiero que ejecute es algo iba a ser una
función flecha en la que yo voy a mirar
voy a pasar aquí a chrome y voy a poner
en este caso aquí valor
y voy a poner nombre punto value lento y
como puedes ver el lento en este caso es
de 4 y si yo escribo más ahora el ahora
el lento
es de 9 y si yo en este caso solamente
pongo 1 ahora en link desde 1 y si yo
pongo máscara otro carácter
ahora el link es de 2 y qué es lo que
significa esto básicamente el nombre
punto value punto link nos va a decir
cuántas letras hay solamente de galo así
cuantas letras hay es realmente tamaño
del string pero es en este caso cuantas
letras hay junto con espacios junto con
tienen bolos y todo eso
entonces lo que voy a hacer es que sin
nombre punto value punto
16
es mayor a eso me arrojó una alerta que
diga nombre
corto
y lo que va a pasar ahora es que si yo
de suscribirte bueno aquí lo primero que
voy a hacer es prevenir todo lo que
viene por default y prevén te faltó para
que no se envié por default sino que se
queda estático
puedes ver y esto es me dice que el link
es una propiedad nula posiblemente no
les ha perfecto
valió no nos valió valió aquí
y ya me dice el nombre muy corto porque
no hemos escrito nada pero si yo pongo
tres caracteres 45 nombre muy corto se
agregó 6 ya no aparece nada porque ya es
válido perfecto no pero no voy a agregar
una alerta en este caso voy a crear una
variable que se llame led warnings que
va a ser igual a texto y voy a
concatenar warnings más igual y voy a
usar en este caso lo que son template
strings y espero aquí está y voy a
agregar el nombre es muy no el nombre no
es válido
y en este caso un verde
y para la parte del email es un poco más
compleja y la verdad es que no voy a
meter tanto en este capítulo si quieres
un capítulo que hable de eso adelante
pero no voy a meterme en este capítulo
porque de grabar una vez y me extendí
más de media hora y la verdad es que no
no y en este caso vamos a usar lo que es
expresiones regulares con javascript que
no es otra cosa que patrones en las que
nosotros podemos encontrar ciertas
características en un string por ejemplo
podemos encontrar si hay símbolos o si
hay números todo esto y aquí te voy a
dejar una guía en este caso de todo lo
que tienes que saber acerca de las
expresiones regulares y el código de
cómo válida del email lo voy a tomar de
esta página que es email validación es
una página en inglés lo único que voy a
hacer es copiar esta parte que está en
el eve
como puedes ver esta parte eso si lo
vamos a tomar de aquí y en la parte de
abajo te explica cada parte mira aquí
está la descripción regular toda la que
hacemos y aquí tecla el inicio aquí el
final y te explica cada cada parte cómo
se compone como puedes ver para qué
sirve esto para qué sirve esto todas las
coincidencias todo todo esto te lo
explica que si tú no entiendes y quieres
un episodio donde yo hable de
expresiones regulares adelante
comentarlo en este caso no lo voy a
tomar porque se va a ser mucho más largo
tutorial lo único que voy a hacer es led
rey ex email
y voy a pegar toda la expresión regular
y esto va a hacer que se valide
absolutamente todo mi email y lo va a
saber ahora voy a poner un ir y te voy a
explicar algo en ya ver qué pasa si yo
ponga propia true nuestro es igual a
true
pero si tú lo pongo en este caso un
signo de admiración es falso y sea false
le pongo un signo de admiración es
verdadero y para que te explico esto
bueno voy a poner aquí en el link en
este caso sabemos que el live como una
condición si es verdadero entra pero si
es falso no entra
y una vez que esta parte lo que va a
hacer es validar el email y lo podemos
validar por lo que es punto text en este
caso riggs email punto texto vamos a
validar en este caso el email punto
value me entiendes
entonces si no es un email punto value
me va a arrojar verdadero
digo falso
mira aquí lo tengo aquí esta parte
voy a poner un control punto log
y mira si yo no pongo nada me dice que
es falso y si yo sigo poniendo cosas y
me dice que es falso aunque si pongo
ahora una roba y esto
me dice que sigue siendo falso porque
porque no hay después un punto y después
de ese punto que más necesita un email
un punto com
y ahora si me dice que es correcto
porque valida que haya primero texto
después hay un arroba y que después haya
texto y después un punto com y de hecho
si te das cuenta en la parte aquí del
rick's me dice que puede ser el tamaño
de dos o de tres porque porque bien pues
entonces podemos poner de cuatro porque
podemos utilizar en este caso dominios
que sea de valor de punto info de punto
edu.mx que sean de dos valores o de
cuatro este rango lo que va a permitir
es que si hay un valor mayor a esto por
ejemplo o la arroba esto punto c
me dice que es falso pero se agregó otra
ya me dice que es verdadero porque es lo
que ve al final y agregó otra todo me
dice que es verdadero se agregó otra
todavía pero se agregó cinco ya me dice
que es falso porque básicamente después
del punto no hay creo que creo yo
dominios o que sean mayores apuntó info
creo creo yo pero esto lo puedes
corregir de dependiendo de todo lo que
tú veas el vídeo que igual debe de
estudiar por ti mismo en lo que es
versiones regulares si quieres un
episodio de esto adelante pero no lo
tomar aquí porque realmente es muy largo
entonces ya puedes ver que si aquí
es falso o sea si no cumple con el email
no va a entrar entonces yo lo que va a
poner un signo de migración para que si
es falso stop / y lo mismo de arriba
vamos a poner en este caso un warning
luego con acá tenemos el email
no es válido y en esta parte ya
tendríamos la validación del email muy
sencilla porque no toco lo que en este
caso sería la parte de expresiones
regulares sería bastante complejo
tocarla voy a crear en este caso otra
variable que se llame entrar y la voy a
poner que sea falsa y en este caso
quiero que si aquí si entra a alguno de
los shift la variable entrar
quiero que entré al entrar sea igual a
true
perdona turno pero no quiero que tú
sea un texto quiero que sea
un valor juliano
ahora voy a hacer lo mismo pero para la
password la password va a ser más fácil
voy a poner paz
punto value link quiero que si la
password es menor a 8 que no cumpla con
la parte entonces vamos a copiar esta
parte igual y quiero que diga la
contraseña no es válida perfecto y
usamos temple de string también para
poder usar en este caso la parte de
etiquetas html ahora quiero que si
entrar como sabes ya lo vimos es igual a
verdadero haga algo
al párrafo
punto inner html
le agregué warnings la variable warning
que estuvo concatenando y ahora qué pasa
si yo lo de suscribirte aparece ya como
puedes ver bastante rápido
lo hicimos que dice el nombre no es
válido el email no es válido y la
contraseña no es válida si yo agregó el
nombre menor haces caracteres en este
caso tiene 6 me quita la parte del
nombre si yo agrego el email hola hola
no es válido todavía
y punto
ni siquiera es válida si se me pide al
menos una letra más para validar la
contraseña debe ser mayor a 8 caracteres
en este caso puede poner jajajajajaja y
es 8 historia no creo que falta uno
no la contraseña no me la válida por qué
la contraseña no es válida me parece que
aquí tengo una un error lo que debo
poner aquí arriba es párrafo
punto de html aquí para que se reinicie
antes de cuando le vamos a dar clic
quiero que se reinicie los valores y
mira ahora que tenemos esta parte o la
arroba ale puntocom
y aquí falta la contraseña
perfecto eres el error como puedes ver
ya está validado el email incluso tú si
quieres si esto es aquí podemos ponerle
la leyenda de enviado cuando todo esté
validado la parte de enviado como puedes
ver enviado y bueno esto fue todo por
este capítulo te recuerdo que te dejo
aquí una parte igual de expresiones
regulares para que las estudie sé que lo
metí pero sí no realmente capítulo su
derecho muy extenso y siento que todavía
se muere un poco más confuso de hecho
tengo aquí una parte igual durante lo
planteó básicamente que son las
presiones regulares lo hice lo vas a
poder descargar aquí te comento un poco
que las expresiones regulares siempre se
inicia lizán con slayer al principio y
son formas alguna de encontrar patrones
y en creo que es una función donde las
imprimo se pueden usar en este caso test
match search y varios métodos para las
expresiones regulares no las explico
porque realmente sería más confuso el
tutorial y más largo pero si quiero un
capítulo de expresiones regulares
suscríbete de like y comenta que lo
quieres mi nombre mi nombre jhon
alexander de álex y design eso ha sido
todo te dejo aquí en la tarjeta del
vídeo la parte de él de cómo hacer el
email y nos vemos la próxima semana
hasta luego
تصفح المزيد من مقاطع الفيديو ذات الصلة
Nuevo Curso de Excel - Capítulo 9, Validación de Datos 🎓 Dostin Hurtado
Curso JavaScript desde 0: APIS WEB (API de Validación) - 89
COMO DARSE DE ALTA EN SIPARE, REGISTRO EN SIPARE 2020, DARSE DE ALTA EN SIPARE IMSS,IMSS,
Microaprendizaje: ¿Cómo crear una cuenta de correo electrónico?
¿Cómo registrar mis obras a través de Internet?
Diseño de una aplicación web
5.0 / 5 (0 votes)