Cómo validar una dirección de correo electrónico en JavaScript

28 mar 2023 2 min di lettura
Cómo validar una dirección de correo electrónico en JavaScript
Indice dei contenuti

Introducción

La validación de correo electrónico es una parte crucial de cualquier aplicación que requiera el registro de usuarios o la introducción de direcciones de correo electrónico. La validación de las direcciones de correo electrónico garantiza que los datos que ingrese sean precisos, lo que ayuda a prevenir el correo no deseado, reduce los errores y garantiza que los mensajes se entreguen a los destinatarios correctos. En este artículo, exploraremos cómo validar direcciones de correo electrónico en JavaScript usando expresiones regulares y atributos de entrada HTML5.

Validar correos electrónicos usando expresiones regulares

Las expresiones regulares proporcionan una forma eficaz de hacer coincidir y validar patrones de direcciones de correo electrónico. Vamos a crear una función de validación de correo electrónico simple usando una expresión regular en JavaScript:

function isValidEmail(email) {
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 return emailRegex.test(email);
 }

Esta función utiliza una expresión regular (emailRegex) para definir el patrón de una dirección de correo electrónico válida. Luego, la función verifica si la dirección de correo electrónico proporcionada coincide con el patrón utilizando el método test(). La función devuelve verdadero si la dirección de correo electrónico es válida y falso en caso contrario.

Uso:

console.log(isValidEmail("[email protected]")); //true
 console.log(isValidEmail("info@example")); //false
 console.log(isValidEmail("@example.com")); //false

Validar correos electrónicos usando atributos de entrada HTML5

HTML5 proporciona una forma integrada de validar las direcciones de correo electrónico utilizando los atributos de tipo y patrón del elemento de entrada:

<form>
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
 <input type="submit" value="Submit">
 </form>

Aquí, el atributo de tipo se establece en "correo electrónico", lo que le indica al navegador que valide la entrada como una dirección de correo electrónico. El atributo de patrón se utiliza para aplicar un patrón de validación de correo electrónico personalizado (similar al del ejemplo de JavaScript). El atributo requerido asegura que el campo debe completarse antes de enviar el formulario.

Agregar mensajes de validación personalizados

Puedes agregar mensajes de validación personalizados usando el método setCustomValidity():

document.getElementById("email").addEventListener("input", function() {
 const email = this.value;

 if (!isValidEmail(email)) {
 this.setCustomValidity("Please enter a valid email address.");
 } else {
 this.setCustomValidity("");
 }
 });

Este fragmento de código agrega un detector de eventos al campo de entrada de correo electrónico. Si la dirección de correo electrónico no es válida, se muestra un mensaje de validación personalizado mediante el método setCustomValidity().

Validar el lado del servidor

Si bien la validación del lado del cliente es esencial para una buena experiencia de usuario, también es crucial validar las entradas del usuario en el lado del servidor. Esto ayuda a proteger la aplicación de entradas malintencionadas y garantiza la integridad de los datos.

Una solución de validación del lado del servidor depende de su tecnología de back-end. Los lenguajes de programación comunes del lado del servidor como PHP, Node.js y Python tienen bibliotecas o funciones integradas para la validación de correo electrónico.

Conclusión

En este artículo, hemos explorado dos formas de validar direcciones de correo electrónico en JavaScript: usando expresiones regulares y atributos de entrada de HTML5. También demostramos cómo agregar mensajes de validación personalizados y destacamos la importancia de la validación del lado del servidor.

Al validar las direcciones de correo electrónico en su aplicación, puede reducir los errores, evitar el spam y garantizar que los mensajes se envíen a los destinatarios correctos.

Support us with a

Successivamente, completa il checkout per l'accesso completo a Noviello.it.
Bentornato! Accesso eseguito correttamente.
Ti sei abbonato con successo a Noviello.it.
Successo! Il tuo account è completamente attivato, ora hai accesso a tutti i contenuti.
Operazione riuscita. Le tue informazioni di fatturazione sono state aggiornate.
La tua fatturazione non è stata aggiornata.