Validación de correo electrónico HTML

En la publicación de hoy, aprenderemos cómo realizar la validación de correo electrónico en HTML.

Validación de correo electrónico en HTML

El proceso de verificar una dirección de correo electrónico para ver si es accesible y válida se conoce como validación de correo electrónico. Ejecuta un proceso corto que encuentra rápidamente errores tipográficos, ya sean errores inocentes o engaños intencionados.

El método más eficiente para garantizar la adquisición de datos de alta calidad sigue siendo la validación por correo electrónico. Los rebotes duros generalmente ocurren como resultado de que el usuario cerró la dirección de correo electrónico, que era una dirección de correo electrónico falsa o ambos.

De acuerdo con las mejores prácticas, no debe recibir más de cinco quejas de spam por cada 5000 correos electrónicos enviados.

El usuario puede ingresar y modificar una dirección de correo electrónico utilizando elementos <input> de tipo email. Antes de que se pueda enviar el formulario, el valor de entrada se verifica automáticamente para garantizar que esté vacío o que sea una dirección de correo electrónico con el formato correcto.

El atributo de valor del elemento <input> incluye una cadena que se valida automáticamente para adherirse a la sintaxis del correo electrónico.

Para que el valor de entrada pase la validación de la restricción, cuando se proporciona, el atributo patrón es una expresión regular que debe coincidir con el valor de la entrada.

El patrón de la validación del correo electrónico es el siguiente:

^[a-z0-9!#$%&‘*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

Para comprender mejor el concepto anterior, considere el siguiente ejemplo.

<form id="emailForm">
<input
    type="email"
    required
    placeholder="email1"
>
<input type="text" required name="email1"
    pattern="^[a-z0-9!#$%&‘*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">

<button type="submit">save</button>
</form>

const form = document.getElementById('emailForm');
function handleForm(event) {
  event.preventDefault();
  console.log('Form submitted')
}
form.addEventListener('submit', handleForm);

En el último ejemplo, definimos dos elementos de entrada, el primero de los cuales es de tipo email y realiza la validación de correo electrónico de forma independiente.

Se proporcionó un patrón de identificación de correo electrónico válido en el segundo elemento de entrada del tipo de datos texto. Las direcciones de correo electrónico incorrectas impedirán que se envíe el formulario y se mostrará un aviso de error.

Ejecute la línea de código anterior en cualquier navegador compatible con HTML. Mostrará el siguiente resultado.