La validación por correo electrónico es un paso importante al crear formularios en sitios web.

La validación de correo electrónico se utiliza para autenticar el nombre de usuario, contraseña, correo electrónico, número de teléfono, etc. La validación de correo electrónico en JavaScript es una parte importante de la experiencia del usuario de una aplicación web. JavaScript autentica la información en el lado del cliente, lo que mejora el procedimiento de procesamiento de datos. JavaScript es ligero e interpretado, lo que lo hace mucho más rápido que otros lenguajes. En este artículo, le mostraremos cómo validar correos electrónicos con Javascript. Aprendamos cómo hacer la validación de correo electrónico usando JavaScript.

¿Qué es la validación de correo electrónico?

imagen del inspector de correo electrónico La validación de correo electrónico es el proceso de comprobación de los valores introducidos por el usuario. La validación de correo electrónico juega un papel vital en las aplicaciones web y mejora la experiencia general del usuario. Con la validación de correo electrónico, puede validar el correo electrónico, la contraseña, la fecha, los números de teléfono móvil y muchos otros campos. JavaScript es tu chico si estás acostumbrado a validar los datos del formulario en el lado del cliente de una aplicación web. Esto acelera el proceso de validación debido a un procesamiento de datos más rápido en comparación con la validación del lado del servidor.

Validación de correos electrónicos en pasos de JavaScript

La validación por correo electrónico es una parte crítica de la validación de un formulario HTML. Un correo electrónico es una cadena o un subconjunto de caracteres ASCII separados en dos partes por el símbolo @. La primera parte contiene información personal, mientras que la otra contiene el nombre de dominio en el que se registra el correo electrónico. Aquí están los caracteres ASCII de la primera parte:

Get 100 Verification For Free
  • Caracteres especiales como # * + & ' ! % @ ? { ^ } "
  • Caracteres numéricos (0 a 9)
  • Punto final, punto, etc., con la condición de que no puede ser la última o la primera letra del correo electrónico y no se puede repetir después de otra.
  • Alfabetos en mayúsculas (de la A a la Z) y en minúsculas (de la a a la z)

La segunda parte incluye lo siguiente:

  • Puntos
  • Dígitos
  • Guiones
  • Cartas
  • El uso de expresiones regulares es una de las mejores formas de validación de correo electrónico en JavaScript. Utiliza expresiones regulares para definir el patrón del personaje.

Algunos de los ejemplos de ID de correo electrónico válidos:

Código JavaScript para validar un identificador de correo electrónico

Para validar correos electrónicos con la expresión regular de JavaScript, usamos /^[email protected][a-zA-Z_]+?. [a-zA-Z] {2,3}$/ regex. Por ejemplo, escribimos para asignar el regex a un patrón. Usamos 'w+ para que coincida con cualquier palabra antes de [email protected]'. [a-zA-Z_]+?. [a-zA-Z] {2,3} coincide con la parte del nombre de host de la dirección de correo electrónico.

correo electrónico.js

Este archivo contiene el código JavaScript que necesitamos para la validación del correo electrónico. Estamos utilizando expresiones regulares para validar el correo electrónico en el lado del cliente de una aplicación web. Código: function ValidateEmail(input) { var validRegex = /^[a-zA-Z0-9.! #$%&'*+/=?^_'{|} ~-][email protected][a-zA-Z0-9-]+(?:. [a-zA-Z0-9-]+)*$/; if (input.value.match(validRegex)) { alert("¡Dirección de correo electrónico válida!"); document.form1.text1.focus(); return true; } else { alert("Invalid email address!"); document.form1.text1.focus(); return false; } Definir una expresión regular para validar la dirección de correo electrónico Comprobar si el valor de entrada coincide con la expresión regular Si coincide, envíe una alerta que indique "dirección de correo electrónico válida" Si no coincide, envíe una alerta que indique "dirección de correo electrónico no válida"

Get 100 Verification For Free

Ejemplos de validación de correo electrónico JavaScript

Validar un correo electrónico es muy importante al crear formularios en sitios web. Una dirección de correo electrónico se divide en dos partes que se separan utilizando el símbolo "@". Cada una de estas partes consiste en una combinación de caracteres ASCII. La parte inicial de un correo electrónico denota principalmente la información personal de un usuario y consiste en lo siguiente. 1. Tanto en mayúsculas (A-Z) como en minúsculas (a-z). 2. Dígitos numéricos (0-9). 3. Caracteres especiales como ! # $ % ^ & * _ – = { } | ~. 4. Un punto y final (no puede ser el primer o el último carácter, además, no se puede usar un punto completo consecutivamente). Además de esto, el nombre de dominio, que es la parte del correo electrónico que viene después del símbolo @ puede consistir en letras, dígitos, guiones y puntos. En este código JavaScript, se utiliza una expresión regular /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/ para validar un correo electrónico. Después, se utilizan instrucciones if/else para especificar que si el usuario ingresa una dirección de correo electrónico válida. El usuario recibirá un mensaje de alerta para confirmar la autenticidad de la dirección de correo electrónico. Por lo tanto, si el usuario ingresa una dirección de correo electrónico no válida, el mensaje de alerta notificará al usuario al respecto.

Ejemplo 1

Validación de correo electrónico con caracteres, dígitos, caracteres especiales, @ y punto. Código: <! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript"> function checkMyMailAddress(HTMLText) { var validate = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/; if (HTMLText.value.match(validate)) { alert("Mail ID format is approved!"); document.mailForm.mailText.focus(); return true; } else { alert("Mail ID format is not approved!"); document.mailForm.mailText.focus(); devolver false; } } </script> <title>Validación de correo electrónico</title> </head> <body onload='document.mailForm.mailText.focus()'> <form name="mailForm" action="#"> Email:<br><input type='text' name='mailText' /> <input type="submit" name="submit" value="Validate" onclick="checkMyMailAddress(document.mailForm.mailText)" /> </form> </body> </html>

Ejemplo 2

Validación de correo electrónico con @ y punto. Código: <html> <body> <body> <form name="form" method="post" action="#" onsubmit="return getMyEmailValidation();"> Email: <input type="text" name="emailAddress"><br/> <input type="submit" value="Check Email"> </form> <script> function getMyEmailValidation() { var emailValidation=document.form.emailAddress.value; var [email protected]= emailValidation.indexOf("@"); var indexWithDot=emailValidation.lastIndexOf("."); if ([email protected]<1 || indexWithDot<[email protected]+2 || indexWithDot+2>=emailValidation.length){ alert("Asegúrese de que la dirección de correo electrónico contenga @ y .com"); devuelva false; } } </script> </body> </html>

Ejemplo 3

Validación de correo electrónico con alfabetos, números y caracteres especiales. Código: <! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Email Validation</title> <script type="text/javascript"> function emailContainAlphabetsSpecialChars() { var emailValidationRegularExpression = /^[A-Za-z0-9 ]+$/ //Validate TextBox value against the Regex. var validation = emailValidationRegularExpression.test(document.getElementById("email").value); if (!validation) { alert("OK, la validación contiene caracteres especiales."); } else { alert("No está bien, no contiene caracteres especiales."); } validación de devolución; } </script> </head> <body> Nombre: <input type="text" /> <br /> <br /> <input type="button" value="check Email" onclick="emailContainAlphabetsSpecialChars()" /> </body> </html>

Ejemplo 4

Código: <! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Email Validation</title> <script type="text/javascript"> function emailContainAlphabetsSpecialChars() { var emailValidationRegularExpression = /[email protected]+.S+/; //Validate TextBox value against the Regex. var validation = emailValidationRegularExpression.test(document.getElementById("email").value); if (!validation) { alert("Not Not una dirección de correo electrónico"); } else { alert("¡Dirección de correo electrónico válida!"); } validación de devolución; } </script> </head> <body> Nombre: <input type="text" /> <br /> <br /> <input type="button" value="check Email" onclick="emailContainAlphabetsSpecialChars()" /> </body> </html>

Formulario HTML para validar una dirección de correo electrónico

En el código HTML, aquí hay un campo de entrada para validar un correo electrónico. Código: <! DOCTYPE html> <html> <body onload='document.form1.text1.focus()'> <div> <h3 class="h3">Introduzca su dirección de correo electrónico</h3> <form name="form1" action="#"> <input type='text' name='text1'/> <br> <input  type="submit" name="submit" value="Submit" onclick="validateEmail(document.form1.text1)"/> </form> </div> <script src="email-validation.js"></script> </body> </html>

Formulario CSS para validar una dirección de correo electrónico

Aquí hay algunos CSS básicos para dar estilo a los elementos HTML. Código: .h3 { margin-left: 38px; } input { font-size: 20pX; } input:focus, textarea:focus { background-color: whitesmoke; } input submit { font-size: 12px; }   Si está buscando un excelente servicio de validación de correo electrónico, puede probar Email Inspector de forma gratuita hoy. ¡Obtenga sus primeras 100 direcciones de correo electrónico revisadas por un profesional y descubra cuántas cuentas falsas tiene en su lista!

Get 100 Verification For Free