Los usuarios pueden administrar fácilmente la validación de formularios con la ayuda de JavaScript y expresiones regulares. Los formularios son cruciales para trabajar adecuadamente en cualquier sitio web, y administrar la entrada no válida en los campos de formulario es el trabajo del programador. Este artículo le mostrará cómo crear un formulario y cómo colocar diferentes verificaciones de validación en diferentes campos de formulario con la ayuda de JavaScript.

Paso 1: Configuración del documento HTML

Cree un nuevo documento HTML y escriba las siguientes líneas dentro para crear un formulario:

Este es un ejemplo de validación de formulario

Escriba su primer nombre:

Escriba su dirección de correo electrónico

Escriba su contacto no#

Entregar!

En las líneas anteriores:

• A La etiqueta se usa para crear un formulario con el nombre establecido en ValentityForm y el método está establecido en "correo". Además, la propiedad OnSubmit está establecida en "Return FormSubMit ()" que ejecuta este método al enviar y solo envía el formulario si ese método devuelve verdadero.
• Después de eso, simplemente usa

  Etiquetas para solicitar al usuario y para tomar la entrada del usuario. Recuerde que cada etiqueta de entrada tiene un nombre único.

• Al final del formulario, cree un botón con el tipo ajustado a "entregar".

Si el documento HTML se carga en un navegador web, mostrará lo siguiente:

La página web solicita el nombre, la dirección de correo electrónico y el número de contacto del usuario del usuario.

Paso 2: Configuración del archivo JavaScript

En JavaScript, comience creando la función FormSubMit () con las siguientes líneas:

función formsubMit ()
// Todas las siguientes líneas se incluirán dentro del cuerpo de esta función

Después de eso, cree tres variables y almacene los valores de los tres campos dentro de ellos utilizando las siguientes líneas:

var firstName = documento.formularios.ValentityForm.nombre.valor;
var conactnumber = documento.formularios.ValentityForm.correo electrónico.valor;
var £ correo electrónicoadr = documento.formularios.ValentityForm.tele.valor;

En las líneas anteriores, el "documento" El objeto se usó para obtener el "Formularios" atributo, que se usó aún más con el nombre del formulario ValentityForm Para acceder a las etiquetas de entrada con sus nombres dentro de él.

Después de eso, defina las expresiones regulares para verificar la validez de cada campo con las siguientes líneas:

var correos electrónicosgex = /^\ w+([\ \.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ W 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;

En las líneas anteriores:

• correos electrónicos verifica una dirección de correo electrónico válida con @ Incluyendo y incluso permite un punto "."Y un guión
• teleregex Comprueba solo caracteres numéricos con una longitud máxima de entrada establecida en 10
• nameregex verifica cualquier caracteres o números especiales dentro del campo Nombre

Después de eso, compare las tres expresiones regulares con sus respectivos valores de campo de texto con la ayuda de las declaraciones IF, y si algún campo no es válido, simplemente devuelva y alerta al usuario, para todo esto, use las líneas siguientes:

if (firstName == "" || nameregex.test (FirstName))
ventana.alerta ("Nombre inválido");
falso retorno;

if (correo electrónicoadr == "" || !correos electrónicos.prueba (correo electrónicoadr))
ventana.alerta ("Ingrese una dirección de correo electrónico válida.");
falso retorno;

if (ConactNumber == "" || !teleregex.test (ConactNumber))
alerta ("número de teléfono no válido");
falso retorno;

Después de esto, solicite al usuario que las entradas fueran válidas y devuelvan el valor como verdadero:

alerta ("Formulario enviado con información correcta");
devolver verdadero;

El código JavaScript completo es como:

functionFormSubMit ()
var firstName = documento.formularios.ValentityForm.nombre.valor;
var conactnumber = documento.formularios.ValentityForm.correo electrónico.valor;
var £ correo electrónicoadr = documento.formularios.ValentityForm.tele.valor;
var correos electrónicosgex = /^\ w+([\ \.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ W 2,3)+$/g;
var teleregex = /^\ d 10 $ /;
var nameregex = /\ d+$ /g;
if (firstName == "" || nameregex.test (FirstName))
ventana.alerta ("Nombre inválido");
falso retorno;

if (correo electrónicoadr == "" || !correos electrónicos.prueba (correo electrónicoadr))
ventana.alerta ("Ingrese una dirección de correo electrónico válida.");
falso retorno;

if (ConactNumber == "" || !teleregex.test (ConactNumber))
alerta ("número de teléfono no válido");
falso retorno;

alerta ("Formulario enviado con información correcta");
returnTrue;

Paso 3: Prueba de la validación del formulario

Ejecutar el funcionamiento de la validación del formulario ejecutando el documento HTML y escribiendo datos a los campos de entrada. Proporcione un nombre no válido con caracteres o números especiales dentro de él

La página web le solicitó al usuario que el nombre no era válido.

Vuelva a intentarlo con el nombre correcto y la dirección de correo electrónico incorrecta:

Se alertó al usuario que la dirección de correo electrónico no es válida.

Después de eso, intente con un nombre válido y una dirección de correo electrónico válida, pero con un número de contacto no válido como:

La página web le solicitó al usuario que el número de contacto no es válido.

Después de eso, para la prueba final, proporcione toda la información correcta como:

Con toda la información correcta proporcionada, la validación del formulario es exitosa y la aplicación web puede avanzar.

Conclusión

La validación de formulario se puede implementar en un formulario HTML con JavaScript, expresiones regulares y un poco de edificio lógico. Las expresiones regulares pueden definir la entrada aceptada correcta para un campo. Después de eso, la expresión regular puede coincidir con el valor de su campo de entrada respectivo usando el método test (). Esto también se aplica a otros tipos de campos de entrada, que sea para la dirección, el código postal o el nombre del país.