Es muy frecuente el tener que introducir direcciones de emails en las páginas web que desarrollamos, ya que casi todas tienen un formulario de contacto y para poder responder a nuestros usuarios, lo más normal es perdir siempre su correo electrónico. Para validar que el usuario realmente nos ha introducido un email, podemos hacerlo de dos formas distintas, una es con HTML 5, y la otra con Javascript.

La más sencilla es con HTML 5, pero si el usuario no tiene el navegador actualizado y no soporta algunas propiedades de HTML 5 que hoy soportan todos los navegadores modernos, no funcionará la validación, por eso siempre se recomienda utilizar Javascript, que lo soportan prácticamente todos los navegadores web.

Bien, pasemos a la acción.

Con HTML 5 nos bastaría con crear un input de tipo ‘email‘:

<input type="email" name="email_contacto" id="email_contacto" />

Si por ejemplo, lo queremos hacer obligatorio el email, podemos usar otro atributo de HTML 5, llamado «required».

<input type="email" name="email_contacto" id="email_contacto" required="required" />

De esta forma, el navegador es el encargado de validar este campo.

Ahora veamos con Javascript, que es la forma más recomendada de hacer la validación de los emails:

function validar_email( email ) 
{
    var regex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email) ? true : false;
}

En esta función utilizamos una expresión regular que comprueba que el texto introducido corresponde con la estructura de un email. Si el email introducido es correcto nos devuelve «true» y si no lo és nos devuelve «false«.

La función se utilizaría de la siguiente forma:

var email_prueba = "fulanito@gmail.com";

if( validar_email( email_prueba ) )
{
    alert("El email es correcto");
}
else
{
    alert("El email NO es correcto");
}

Esto es todo amigos, así de fácil y sencillo se validan las direcciones de email.