Prueba tus habilidades!

Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de que continúe pon a prueba tus habilidades:

Validación de formularios

El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestro artículo sobre validación de formularios del lado del cliente.

Si se queda atascado, pídanos ayuda; consulte la sección Evaluación o ayuda adicional al final de esta página.

Validación de formulario 1

En esta tarea, le proporcionamos un formulario de consulta de soporte simple y queremos que le agregue algunas funciones de validación:

1. Haga que todos los campos de entrada sean obligatorios para completar antes de poder enviar el formulario.
2. Cambie el tipo de los campos 'Dirección de correo electrónico' y 'Número de teléfono' para que el navegador aplique alguna validación más específica y adecuada a los datos que se solicitan.
3. Asigne al campo 'Nombre de usuario' una longitud requerida de entre 5 y 20 caracteres, al campo 'Número de teléfono' una longitud máxima de 15 caracteres y al campo 'Comentario' una longitud máxima de 200 caracteres.

Intente enviar su formulario; debería negarse a enviarse hasta que se cumplan las restricciones anteriores y mostrar mensajes de error adecuados. Para ayudar, es posible que desee considerar agregar algo de CSS simple para mostrar cuándo un campo de formulario es válido o no válido.

Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.

Validación de formulario 2

Ahora queremos que tome el mismo formulario que vio en la tarea anterior (use su respuesta anterior si lo desea) y agregue una validación de patrón más específica a los primeros tres campos usando expresiones regulares.

1. Todos los nombres de usuario de nuestra aplicación constan de una sola letra, seguida de un punto y de tres o más letras o números. Todas las letras deben estar en minúsculas.
2. Todas las direcciones de correo electrónico de nuestros usuarios constan de una o más letras (mayúsculas o minúsculas) o números, seguidos de '@bigcorp.eu'.
3. Elimine la validación de longitud del campo del número de teléfono, si está presente, y configúrelo para que acepte 10 dígitos, ya sea 10 dígitos seguidos o un patrón de tres dígitos, tres dígitos y luego cuatro dígitos, separados por espacios. guiones o puntos.

Nuevamente, para ayudar, es posible que desees considerar agregar algo de CSS simple para mostrar cuándo un campo de formulario es válido o no.

Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.

Validación de formulario 3

En nuestra tarea final para este conjunto, le brindamos un ejemplo similar al que vio en el artículo adjunto: una simple entrada de dirección de correo electrónico. Nos gustaría que utilice la API de validación de restricciones, además de algunos atributos de validación de formulario, para programar algunos mensajes de error personalizados.

Haga que la entrada sea obligatoria para completar y asígnele una longitud mínima de 10 caracteres.

Agregue un detector de eventos que verifique si el valor ingresado es una dirección de correo electrónico y si es lo suficientemente largo. Si no parece una dirección de correo electrónico o es demasiado corta, proporcione al usuario los mensajes de error personalizados adecuados.

Descarga el punto de partida para que esta tarea funcione en tu propio editor o en un editor online.

Evaluación o ayuda adicional

Puedes practicar estos ejemplos en los editores interactivos anteriores.

Puede colocar su trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle, o Glitch. Puede escribir el código usted mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.