¿Cómo hacer la validación de correo electrónico en JavaScript? [Con ejemplos]

Publicado: 2021-02-23

JavaScript es un lenguaje de programación diseñado para crear aplicaciones. Es mucho más rápido que otros idiomas porque es muy ligero y fácil de usar. Se utiliza para crear aplicaciones bien diseñadas.

La validación de correo electrónico en JavaScript es importante para la experiencia del usuario en la creación de aplicaciones web. La validación ayuda a pasar información válida a un servidor desde el cliente de la aplicación web.

Tabla de contenido

¿Qué es la Validación?

La validación se refiere al proceso de examinar los valores que ingresa el usuario. Desempeña un papel crucial en la creación de aplicaciones y mejora la experiencia del usuario. Muchos campos, como números de teléfono móvil, correos electrónicos, fechas y contraseñas, se validan a través de este proceso.

JavaScript hace que el proceso de validación sea más rápido debido a su procesamiento de datos más rápido que otras validaciones del lado del servidor. Ahora echemos un vistazo a la implementación de la validación de correo electrónico en JavaScript .

Validación de correo electrónico en JavaScript

La validación de correo electrónico es una de las partes vitales de la autenticación de un formulario HTML. El correo electrónico es un subconjunto o una cadena de caracteres ASCII, divididos en dos partes mediante el símbolo @. Su primera parte consiste en información privada, y la segunda contiene el nombre de dominio en el que se registra un correo electrónico.

Aquí están los caracteres ASCII de la primera parte:

  • Caracteres especiales como # * + & ' ! % @ ? { ^ } ”
  • Caracteres numéricos (0 a 9)
  • Punto, punto, etc., con la condición de que no puede ser la última ni la primera letra del correo electrónico y no puede repetirse después de otro.
  • 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
  • Letras

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 identificación de correo electrónico válida:

Algunos otros ejemplos de ID de correo electrónico no válido

  • [email protected] (no se permiten puntos uno sobre otro)
  • Inownzsite()&@abcd.com (solo se permiten caracteres, guiones, guiones bajos y dígitos en la expresión regular).
  • Ourwebsiteismne.azbyz.com (aquí el símbolo @ no está allí)
  • [email protected] (Aquí el dominio de nivel superior no puede comenzar con un punto)
  • @youmenandwe.we.net (aquí no puede comenzar con el símbolo @)
  • [email protected] (“.b” no es un dominio de nivel superior válido)email.js

El archivo consta de un código JavaScript necesario para la validación del correo electrónico. Aquí, las expresiones regulares se utilizan para validar un correo electrónico en el lado del cliente de una aplicación.

Puntos de control para una validación de correo electrónico eficiente en código JavaScript:

  • Describir una expresión regular para validar una dirección de correo electrónico
  • Si un valor de entrada coincide con expresiones regulares
  • Si coincide, envía la alerta diciendo "la dirección de correo electrónico es válida".
  • Si no coincide, envíe la alerta diciendo "la dirección de correo electrónico no es válida".

Relacionado: Validación de contraseña en Javascript

Código de validación de correo electrónico en JavaScript

A continuación se muestra el código de validación de correo electrónico en JavaScript. Este código puede validar si el correo electrónico creado o ingresado por el usuario es válido o no. Guarde el archivo como filename.js.

// Fragmento de código

función Validación de correo electrónico (correo electrónico ingresado)

{

var formato_correo = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;

si (correo electrónico ingresado.valor.coincidencia (correo electrónico ingresado))

{

alert ("¡Sí! ¡Un correo electrónico válido!");

documento.formulario1.texto1.foco();

devolver verdadero;

}

Demás

{

alert(“¡Lo siento! ¡E-mail inválido!”);

documento.formulario1.texto1.foco();

falso retorno;

}

}

La función de JavaScript se utiliza en el formulario HTML como se muestra a continuación. Guarde el archivo como filename.html:

<!DOCTYPEhtml>

<html lang=”es”>

<cabeza>

<juego de caracteres meta=”utf-8″>

<title>validación de correo electrónico en JavaScript</title>

<enlace rel='hoja de estilo' href='form-style.css' type='text/css' />

</cabeza>

<body onload='document.form1.text1.focus()'>

<clase div=”correo”>

<h2>Ingrese el correo electrónico para la Validación</h2>

<formulario nombre=”formulario1″ acción=”#”>

<ul>

<li><tipo de entrada='texto' nombre='texto1'/></li>

<li> </li>

<li class=”Validar”><input type=”enviar” name=”Validar” value=”Validar” onclick=”ValidarCorreo electrónico(document.form1.text1)”/></li>

<li> </li>

</ul>

</formulario>

</div>

<secuencia de comandos src=”nombre de archivo.js”></secuencia de comandos>

</cuerpo>

</html>

El siguiente código puede agregar estilo al formulario usando CSS. Guarde el archivo como filename.css.

li {tipo de estilo de lista: ninguno;

tamaño de fuente: 16pt;

}

.correo {

margen: automático;

acolchado superior: 20px;

parte inferior del relleno: 20px;

ancho: 850px;

fondo: rgb (150, 195, 208);

borde: 1px suelo rgb (1, 20, 24);

}

.correo h2 {

margen izquierdo: 36px;

}

aporte {

tamaño de fuente: 28pt;

}

entrada: foco, área de texto: foco{

color de fondo: blanco;

}

enviar entrada {

tamaño de fuente: 18pt;

}

Ahora puede ejecutar el código HTML y obtener la validación del correo electrónico en JavaScript .

Leer: Proyectos Javascript en GitHub

Aprenda cursos de software en línea de las mejores universidades del mundo. Obtenga programas Executive PG, programas de certificados avanzados o programas de maestría para acelerar su carrera.

Conclusión

La validación del correo electrónico es muy importante para evitar crear direcciones de correo electrónico no válidas. En este artículo, se explica, con el código, cómo validar si una identificación de correo electrónico es válida o no y dejar que el sistema verifique y notifique al usuario si la identificación de correo electrónico ingresada no es válida.

Si está interesado en obtener más información sobre el desarrollo de pila completa, consulte el programa Executive PG de upGrad & IIIT-B en desarrollo de software de pila completa, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de capacitación rigurosa, más de 9 proyectos y asignaciones. , estado de exalumno de IIIT-B, proyectos finales prácticos y asistencia laboral con las mejores empresas.

Aterrice en el trabajo de sus sueños

Solicite ahora el programa Executive PG en Full Stack Development