Simply point out that, according to the official specification , the regex that represents a orthographically valid email address is the following:
/^[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])?)*$/
I purposely put the email address orthographically valid , because what defines a valid really email address is that it works, that is, that there is and can receive emails.
It follows that verification by means of Javascript is not enough. You can help us to do a validation [orthographic] , provided that Javascript is activated on the client side.
If you want to verify that the email really exists , there is no other way than sending an email and the recipient responds. That's what you can call " validation [real] of an email .
In fact, that is what all the serious subscription services do, they send us an email that we must verify to be definitively registered in their sites or in their distribution lists.
I allow myself to graphically show the steps to validate an e-mail. We will see that what is treated here is only step 2/5 of a validation process that would include 5 stages :
-
Stage 1 : The user writes an e-mail
-
Stage 2 : Validation Spelling of the e-mail written by the user
-
Stage 3 : Verify if the domain corresponding to the orthographically validated e-mail has an e-mail server
-
Stage 4 : Send a request (ping) or an email to verify that the server is accepting e-mails
-
Stage 5 : The e-mail was received correctly in that address
Until we reach stage 5, we can not say that the e-mail has been validated .
If in any case the OP requests a validation method that accepts addresses with ñ and other characters not defined up to now by the official specification of w3.org (link above), the regex mentioned in a previous answer works.
The code that follows is the same used in the question, but implementing on the one hand the official regex and the regex that allows Latin characters such as the ñ.
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";
}
});
<p>
Email:
<input id="email">
<span id="emailOK"></span>
</p>
Validation [orthographic] in HTML5
HTML5 allows us to declare our input of the email type and is responsible (in part) for the validation by us, as MDN says :
email : The attribute represents an email address. The
Line breaks are automatically deleted from the value entered. Can
enter an invalid email address, but the entry field
it will only work if the address satisfies the production ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) where atext is defined
in RFC 5322, section 3.2.3 and ldh-str is defined in RFC 1034, section 3.5.
You can combine email with the attribute pattern :
pattern : A regular expression against which the value is evaluated. The boss
must match the full value, not just one part. It can be used
the title attribute to describe the pattern as it helps the user. East
attribute applies when the type attribute is text, search, tel, url,
email, or password, and otherwise it is ignored. The language of
regular expression is the same as the JavaScript RegExp algorithm,
with the parameter 'u' that allows to treat the pattern as a sequence
of Unicode code. The pattern is not surrounded by diagonals.
The disadvantage is that not all clients are compatible with HTML5.
<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>