Simplemente señalar que, de acuerdo a la [especificación oficial][1], el regex que representa una dirección de email **ortográficamente** válida es el siguiente:

    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

Puse a propósito el término _dirección de email **ortográficamente** válida_, porque lo que define una dirección de email **realmente** válida es que ésta funcione, es decir, que exista y pueda recibir emails.

De ahí se desprende que una verificación por medio de Javascript no es suficiente. Puede ayudarnos a hacer una **validación [ortográfica]**, a condición de que Javascript esté activado del lado del cliente. 

Si se quiere verificar que el email **realmente existe**, no hay otra manera que enviando un email y que el destinatario responda. Es a eso a lo que se le puede llamar con toda propiedad **validación [real] de un email**. 

De hecho, eso es lo que hacen todos los servicios de suscripción serios, nos envían un email que debemos verificar para quedar inscritos definitivamente en sus sitios o en sus listas de distribución.

Me permito mostrar gráficamente los pasos para **validar** un e-mail. Veremos que lo tratado aquí es apenas la etapa 2/5 de un proceso de validación que comprendería **5 etapas**:

 - ***Etapa 1***: El usuario **escribe** un e-mail
 - ***Etapa 2***: Validación **ortográfica** del e-mail escrito por el usuario
 - ***Etapa 3***: Verificar si el dominio correspondiente al e-mail validado ortográficamente **posee un servidor de e-mail**
 - ***Etapa 4***: Enviar una petición (ping) o un email para verificar que **el servidor está aceptando e-mails**
 - ***Etapa 5***: El e-mail fue recibido correctamente en **esa dirección**

Hasta que no llegamos a la etapa 5, no podemos decir que el e-mail ha sido *validado*.

[![introducir la descripción de la imagen aquí][2]][2]

Si todos modos el OP solicita un método de validación que acepte direcciones con ñ y otros caracteres no definidos hasta el momento por la especificación oficial de w3.org (enlace de más arriba), el regex mencionado en una anterior respuesta funciona.

El código que sigue es el mismo usado en la pregunta, pero implementando por un lado el regex oficial y el regex que **permite** caracteres latinos tales como la ñ.


<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    document.getElementById('email').addEventListener('input', function() {
        campo = event.target;
        valido = document.getElementById('emailOK');
            
      var reg = /^(([^<>()[\]\\.,;:\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,}))$/;

 var regOficial = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

        //Se muestra un texto a modo de ejemplo, luego va a ser un icono
        if (reg.test(campo.value) && regOficial.test(campo.value)) {
          valido.innerText = "válido oficial y extraoficialmente";
        } else if (reg.test(campo.value)) {
          valido.innerText = "válido extraoficialmente";

        } else {
          valido.innerText = "incorrecto";

}
    });

<!-- language: lang-html -->

    <p>
        Email:
        <input id="email">
        <span id="emailOK"></span>
    </p>


<!-- end snippet -->

<h2>Validación [ortográfica] en HTML5</h2>
HTML5 permite declarar nuestro `input`del tipo email y se encarga (en parte) de la validación por nosotros, [como dice MDN][3]:

> `email`: El atributo representa una dirección de correo electrónico. Los
> saltos de línea se eliminan automáticamente del valor ingresado. Puede
> ingresarse una dirección de correo no válida, pero el campo de ingreso
> sólo funcionará si la dirección  satisface la producción `ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )` donde `atext` está definida
> en [RFC 5322, sección 3.2.3][4] y `ldh-str` está definida en [RFC 1034, sección 3.5.][5]

Se puede combinar `email` con el atributo [`pattern`][6]:

> `pattern` : Una expresión regular contra la que el valor es evaluado. El patrón
> debe coincidir con el valor completo, no solo una parte. Se puede usar
> el atributo title para describir el patrón como ayuda al usuario. Este
> atributo aplica cuando el atributo type es text, search, tel, url,
> email, o password, y en caso contrario es ignorado. El lenguaje de
> expresión regular es el mismo que el algoritmo RegExp de JavaScript,
> con el parámetro 'u' que permite tratar al patrón como una secuencia
> de código Unicode. El patrón no va rodeado por diagonales.

La desventaja es que no todos los clientes son compatibles con HTML5.

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

<form>
<input type="email" pattern='^(([^<>()[\]\\.,;:\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,}))$' title="Entre un email válido"  placeholder="Entre su email">
<input type="submit" value="Submit">
</form>
<!-- end snippet -->


  [1]: https://www.w3.org/TR/html5/forms.html#valid-e-mail-address
  [2]: https://i.sstatic.net/qYhia.png
  [3]: https://developer.mozilla.org/es/docs/HTML/HTML5/Formularios_en_HTML5
  [4]: http://tools.ietf.org/html/rfc5322#section-3.2.3
  [5]: https://tools.ietf.org/html/rfc1034#section-3.5
  [6]: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input