Phenquestions
La validación de formularios es la parte básica y más importante del proceso de desarrollo web. Por lo general, la validación del formulario se realiza en el lado del servidor. La validación del formulario ayuda a mostrar mensajes de error al usuario si se proporcionan datos innecesarios o incorrectos, o si un campo obligatorio se deja vacío. Si el servidor encuentra algún error, lo devuelve; 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 básica de formularios en javascript. Entonces, vayamos directamente a los ejemplos y veamos cómo podemos hacer eso en javascript.
Ejemplos de
En primer lugar, asumimos un formulario con el nombre de "formulario de prueba", en el que tenemos un campo de entrada con la etiqueta "Nombre de usuario", y un tipo de entrada se envía en nuestro archivo HTML. En la etiqueta de formulario, hemos creado un evento onsubmit, en el que estamos cerrando y devolviendo una función validateFunc ().
En el archivo de secuencia de comandos, escribiremos la definición de función de validateFunc (), que se ejecutará cada vez que el usuario presione el botón enviar. En esa función, validaremos el campo de entrada del nombre de usuario. Suponemos que queremos validar si el campo de nombre de usuario está vacío o no cuando el usuario presiona el botón enviar.
Entonces, para validar el campo de nombre de usuario. Primero asignamos una variable al documento.testForm, solo para darle un aspecto limpio y comprensible al código. Luego, en la definición de la función, escribiremos el código para la validación. Escribiremos una declaración if para verificar el campo de formulario vacío. Si el campo de nombre de usuario está vacío, mostraremos un cuadro de alerta para mostrar el error, nos centraremos en el campo de nombre de usuario nuevamente y devolveremos falso para que el formulario no se envíe. De lo contrario, si pasa la verificación y los datos se validan, volveremos verdadero a la función.
var theForm = documento.testForm;// Código de validación del formulario
function validationFunc ()
si (el formulario.nombre.valor == "")
alert ("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 del 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 del formulario. Para una mayor implementación, como múltiples validaciones de formularios o también desea tener una verificación de la longitud de los caracteres.
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 poner una declaración if para la validación de los campos del formulario de correo electrónico y contraseña en la definición de función del archivo de secuencia de comandos. Supongamos que queremos aplicar múltiples validaciones en el campo de correo electrónico como si el campo no debería estar vacío y su longitud no debería ser menor a 10 caracteres. Entonces, podemos usar OR "||" en la declaración if. Si se produce alguno de estos errores, se mostrará un cuadro de alerta con el mensaje de error que queremos mostrar, se centrará en el campo del formulario de correo electrónico y devolverá falso a la función. Del mismo modo, si queremos aplicar la verificación de longitud de caracteres en el campo de contraseña, podemos hacerlo.
var theForm = documento.testForm;// Código de validación del formulario
function validationFunc ()
si (el formulario.nombre.valor == "")
alert ("el nombre está vacío");
la forma.nombre.enfocar();
falso retorno;
si (el formulario.Email.valor == "" || la forma.Email.valor.largo < 10)
alerta ("El correo electrónico es inapropiado");
la forma.Email.enfocar();
falso retorno;
si (el formulario.contraseña.valor.largo < 6)
alerta ("La contraseña debe tener 6 caracteres");
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 el 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 formularios en JavaScript. También podemos aplicar la validación de datos en el lado del cliente usando Regex o escribiendo nuestra propia función personalizada. Supongamos que queremos aplicar la validación de datos en el campo de correo electrónico. La expresión regular sería así para validar un correo electrónico.
si (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [correo electrónico protegido] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.prueba (el formulario.Email.valor))
alerta ("El correo electrónico es inapropiado");
la forma.Email.enfocar() ;
falso retorno;
Esta fue solo una demostración básica de la validación de datos usando expresiones regulares. Pero el cielo está abierto para que vueles.
Conclusión
Este artículo cubre la validación básica de formularios en javascript. También lo hemos intentado y nos hemos infiltrado en la validación de datos usando expresiones regulares. Si desea obtener más información sobre las expresiones regulares, tenemos un artículo dedicado relacionado con las expresiones regulares en linuxhint.com. Para aprender y comprender los conceptos de JavaScript y contenido más útil como este, siga visitando linuxhint.com. Gracias!
