Validación de formulario JavaScript
La validación de formulario es la parte básica y más importante del proceso de desarrollo web. Por lo general, la validación de formulario se realiza en el lado del servidor. La validación de formulario ayuda a mostrar mensajes de error al usuario si se proporcionan datos innecesarios o incorrectos, o se deja vacío un campo requerido. Si el servidor encuentra algún error, devuelve ese error; Luego, mostramos el mensaje de error al usuario. Pero, podemos usar JavaScript en el front-end para validar los datos del formulario y mostrar errores de inmediato. En este artículo, aprenderemos la validación de formulario básico en JavaScript. Entonces, vamos directamente a los ejemplos y veamos cómo podemos hacerlo en JavaScript.
Ejemplos
En primer lugar, asumimos un formulario con el nombre de "TestForm", en el que tenemos un campo de entrada con la etiqueta "Nombre de usuario", y un tipo de entrada envía en nuestro archivo HTML. En la etiqueta de formulario, hemos creado un evento de ondubmit, en el que estamos haciendo el cierre y devolviendo una función validateFunc ().
En el archivo de script, escribiremos la definición de función de ValidateFunc (), que se ejecutará cada vez que el usuario presente el botón Enviar. En esa función, validaremos el campo de entrada del nombre de usuario. Suponemos que queremos validar el campo de nombre de usuario está vacío o no cuando el usuario presenta el botón Enviar.
Entonces, para validar el campo de nombre de usuario. Primero asignamos una variable al documento.testform, solo para dar un aspecto limpio y comprensible al código. Luego, en la definición de función, escribiremos el código para la validación. Escribiremos una declaración IF para verificar el campo Formulario vacío. Si el campo de nombre de usuario está vacío, mostraremos un cuadro de alerta para mostrar el error, enfocarnos en el campo de nombre de usuario nuevamente y devolver falso para que el formulario no se envíe. De lo contrario, si pasa la verificación y los datos se validan, devolveremos verdadero a la función.
var theForm = documento.testform;// Código de validación de formulario
function ValidationFunc ()
if (theForm.nombre.valor == "")
alerta ("el nombre está vacío");
la forma.nombre.enfocar();
falso retorno;
return (verdadero);
Después de escribir todo este código. Si ejecutamos el código y hacemos clic en el botón Enviar sin escribir nada en el campo Formulario.
Como puede observar en la captura de pantalla adjunta a continuación, arroja un error en el cuadro de alerta.
Este es un ejemplo muy básico pero bueno para comenzar a implementar la validación de formulario. Para una implementación adicional, como múltiples validaciones de formularios o también desea verificar la longitud del personaje.
Para ese propósito, primero suponemos dos campos de formulario en la etiqueta de formulario con la etiqueta de "correo electrónico" y "contraseña" en nuestro archivo HTML.
Para la validación en JavaScript, volveremos a colocar una declaración IF para la validación de los campos de formulario de correo electrónico y contraseña en la definición de función del archivo de script. Supongamos que queremos aplicar validaciones múltiples en el campo de correo electrónico, como el campo, no debe estar vacío, y su longitud no debe ser inferior a 10 caracteres. Entonces, podemos usar o "||" En la declaración if. Si se produce alguno de estos errores, mostrará un cuadro de alerta con el mensaje de error que queremos mostrar, centrarnos en el campo Formulario de correo electrónico y devolver falso a la función. Del mismo modo, si queremos aplicar la longitud del personaje, verifique el campo de contraseña, podemos hacerlo.
var theForm = documento.testform;// Código de validación de formulario
function ValidationFunc ()
if (theForm.nombre.valor == "")
alerta ("el nombre está vacío");
la forma.nombre.enfocar();
falso retorno;
if (theForm.correo electrónico.valor == "" || la forma.correo electrónico.valor.longitud < 10)
alerta ("El correo electrónico es inapropiado");
la forma.correo electrónico.enfocar();
falso retorno;
if (theForm.contraseña.valor.longitud < 6)
alerta ("la contraseña debe tener 6 caracteres de largo");
la forma.contraseña.enfocar();
falso retorno;
return (verdadero);
Después de escribir todo este código, vuelva a cargar la página para tener código actualizado. Ahora, o dejamos un campo de correo electrónico vacío o escribimos un correo electrónico de menos de 10 caracteres. En ambos casos, mostrará un error "El correo electrónico es inapropiado".
Entonces, así es como podemos aplicar la validación básica de formulario en JavaScript. También podemos aplicar la validación de datos en el lado del cliente utilizando regex o escribiendo nuestra propia función personalizada. Supongamos que queremos aplicar la validación de datos en el campo de correo electrónico. El Regex sería así para validar un correo electrónico.
if (/^[A-ZA-Z0-9.!#$%& '*+/=?^_ '| ~-]+@[A-ZA-Z0-9-]+(?: \.[A-ZA-Z0-9-]+)*$/.Prueba (THEFOR.correo electrónico.valor))
alerta ("El correo electrónico es inapropiado");
la forma.correo electrónico.enfocar() ;
falso retorno;
Esta fue solo una demostración básica de la validación de datos utilizando regex. Pero, el cielo está abierto para que vueles.
Conclusión
Este artículo cubre la validación de formulario básico en JavaScript. También hemos intentado y tener un adelanto en la validación de datos utilizando regex. Si desea obtener más información sobre Regex, tenemos un artículo dedicado relacionado con Regex en Linuxhint.comunicarse. Para aprender y comprender los conceptos de JavaScript y el contenido más útil como este, sigue visitando Linuxhint.comunicarse. Gracias!