Cómo validar el formulario de correo electrónico en el lado del cliente en JavaScript
En el lado del cliente, correos electrónicos Los formularios se validan para captar datos no válidos para que el usuario pueda corregirlo inmediatamente. En otros casos, si se envían datos no válidos al servidor, se rechazará y el servidor correspondiente lo enviará de regreso al cliente.
Este artículo discutirá validante formulario de correo electrónicos en el lado del cliente en Javascript. Entonces, comencemos!
Cómo validar el formulario de correo electrónico en el lado del cliente en JavaScript
Un correo electrónico comprende un "cadena,"Que se representa como un subconjunto de caracteres ASCII, separados en dos partes utilizando el"@" símbolo. Se puede escribir como "userInfo@dominio", dónde "Información de usuario"¿Es la información privada del usuario?. La longitud del "Información de usuario"Parte no debería ser más que 64 personajes, mientras el dominio el nombre puede tener 253 caracteres.
El "Información de usuario"La parte puede incluir los caracteres ASCII por debajo:
- Números de 0 a 9.
- Mayúscula (ARIZONA) y minúsculas (Arizona) Cartas en inglés.
- Caracteres especiales como ~ _ ' / ? - + = ^ | ps ! & # %
- También puede agregar un personaje de época ".", Pero no debería ser el primer y último carácter de la parte" UserInfo "y no la repita después de otro.
El nombre de dominio especificado en la dirección de correo electrónico, como Org, Info, Net, Com, US, puede contener dígitos, letras, guiones y parada completa.
Consulte algunos ejemplos a continuación de ID de correo electrónico válidos e inválidos:
Ejemplos de formato de correo electrónico válidos
Ejemplos de formato de correo electrónico no válidos
- galaxia.com ("@"El personaje no se agrega)
- [email protected] (el dominio de nivel superior no puede comenzar con ".")
- [email protected] (".a"No es un dominio de nivel superior válido)
- [email protected] (no comience una identificación de correo electrónico con "." personaje)
- @cualquier.dominio.neto ("Información de usuario"Falta la parte antes del"@" personaje )
Ahora, demostraremos un ejemplo práctico relacionado con el formulario de validación de correo electrónico en JavaScript.
Ejemplo: valida el formulario de correo electrónico en el lado del cliente en JavaScript
En primer lugar, crearemos un formulario en el lado de nuestro cliente que tenga un "aporte"Campo para ingresar ID de correo electrónico y un"Entregar"Botón para verificar el formato de correo electrónico:
Ingrese su dirección de correo electrónico amablemente
Expresión regular para validar el formulario de correo electrónico en el lado del cliente en JavaScript
En JavaScript, Expresiones regulares son uno de los métodos más útiles utilizados para validar el formato de correo electrónico. Representan un carácter de patrón que se compara con la entrada del usuario.
En nuestro archivo JavaScript, agregaremos la siguiente expresión regular para validar la ID de correo electrónico ingresada por el usuario:
mailFormat = /^\ w+([\ \.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ W 2,3)+$/;La expresión regular otorgada anteriormente le permite agregar letras mayúsculas (A-Z) y minúsculas (A-Z), dígitos (0-9), período "."Y caracteres especiales como ~ _ ' / ? - + = ^ | ps ! & # %, en la identificación de correo electrónico.
Crearemos un "Validar correo electrónico()"Función en JavaScript, que tomará"texto de entrada"Como argumento. Después de eso, almacenaremos la expresión regular mencionada en el "mailformat". El agregado "mailformat"Luego se compara con la entrada del usuario. Si la ID de correo electrónico ingresada tiene un formato válido, aparecerá una alerta en la pantalla con la cadena "Ha ingresado una dirección de correo electrónico válida!". De lo contrario, le hará saber que la identificación de correo electrónico no es válida:
función validateMail (inputText)var mailFormat = /^\ w+([\ \.-]?\ w+)*@\ w+([\.-]?\ w+)*(\.\ W 2,3)+$/;
if (inputText.valor.Match (MailFormat))
alerta ("ha ingresado una dirección de correo electrónico válida!");
documento.formulario 1.texto 1.enfocar();
devolver verdadero;
demás
alerta ("dirección de correo electrónico no válida");
documento.formulario 1.texto 1.enfocar();
falso retorno;
También hemos establecido el estilo de elementos HTML para mejorar su apariencia en el formulario de validación de correo electrónico:
Ahora, abriremos nuestro "índice.html " Archivo con la ayuda del código VS "Servidor en vivo" extensión:
Aquí viene el formulario de validación de correo electrónico con un campo de entrada y un botón de envío:
Por primera vez, ingresaremos una identificación de correo electrónico válida y:
Después de hacer clic en el "Entregar"Botón, aparece un cuadro de alerta en nuestra página web, que establece que la dirección de correo electrónico ingresada es válida:
Ahora, para verificar un correo electrónico no válido, escribiremos un correo electrónico que tenga un formato no válido y luego haga clic en el botón Enviar:
Puede ver que nuestro formulario de validación de correo electrónico funciona perfectamente para validar la ID de correo electrónico de acuerdo con el formato especificado.
Conclusión
Usando JavaScript, puede validar los formularios de correo electrónico en el lado del cliente. El formulario de validación de correo electrónico creado se basa en los requisitos del usuario, como permitir expresiones regulares, aceptar solo caracteres y dígitos en ID de correo electrónico, o solo permitir dominios específicos. Validar los formularios de correo electrónico también ayuda a enviar información correcta y valiosa al servidor. Este artículo sobre el procedimiento de validar los formularios de correo electrónico en el lado del cliente en JavaScript con la ayuda de ejemplos apropiados.