Usar expressões regulares é provavelmente a melhor forma. Podes ver uns quantos testes aqui (retirado de chromium)
function validarEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
Tens aqui alguns exemplos de expressões regulares que aceitam unicode:
var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
Mas tem em mente que não se deve confiar apenas na validação do JavaScript. JavaScript pode ser facilmente desativado. Isso deve ser validado no lado do servidor também.
Está aqui um exemplo disso em ação:
function validarEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validar() {
var $result = $("#result");
var email = $("#email").val();
$result.text("");
if (validarEmail(email)) {
$result.text(email + " é válido :)");
$result.css("color", "green");
} else {
$result.text(email + " não é válido :(");
$result.css("color", "red");
}
return false;
}
$("#validar").bind("click", validar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>Introduz o seu endereço eletrónico:</p>
<input id='email'>
<button type='submit' id='validar'>Validar!</button>
</form>
<h2 id='result'></h2>