En HTML
lo tengo así no sé de que forma validarlo ya que no quiero hacerlo por el type="email"
<input class="input-100" type="email" name="email" placeholder="[email protected] " maxlength="39" id="email">
En HTML
lo tengo así no sé de que forma validarlo ya que no quiero hacerlo por el type="email"
<input class="input-100" type="email" name="email" placeholder="[email protected] " maxlength="39" id="email">
Basado en lo que se ha respondido previamente aqui (ya que comentas que no te queda claro como podrias hacerlo), te lo explicare de otra manera acerca de como podrias hacerlo:
function validarEmail(elemento){
var texto = document.getElementById(elemento.id).value;
var regex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
if (!regex.test(texto)) {
document.getElementById("resultado").innerHTML = "Correo invalido";
} else {
document.getElementById("resultado").innerHTML = "";
}
}
<input type="text" id="email" name="email" placeholder="Correo Electronico" onkeyup="validarEmail(this)">
<a id='resultado'></a>
Primero
Creamos una funcion llamada validarEmail()
, a la que le pasaremos como parametro el elemento HTML, que corresponda al <input>
donde se escribira el Correo Electronico. En esta funcion se validara el texto usando una expresion regular.
function validarEmail(elemento){
var texto = document.getElementById(elemento.id).value;
var regex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
if (!regex.test(texto)) {
document.getElementById("resultado").innerHTML = "Correo invalido";
} else {
document.getElementById("resultado").innerHTML = "";
}
}
Segundo
Desde el elemento <input>
agregaremos el evento onkeyup()
, el cual se ejecutara cada que se presione una tecla.
onkeyup="validarEmail(this)"
Tercero
Creamos un elemento de tipo <a>
el cual tendra como identificador la palabra resultado, y desde la funcion validarEmail()
, cambiaremos el texto de este dependiendo de la validacion del Correo Electronico.
<a id='resultado'></a>
Ejemplo
<html>
<head>
<title>
Titulo
</title>
<script type="text/javascript">
function validarEmail(elemento) {
var texto = document.getElementById(elemento.id).value;
var regex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
if (!regex.test(texto)) {
document.getElementById("resultado").innerHTML = "Correo invalido";
} else {
document.getElementById("resultado").innerHTML = "";
}
}
</script>
</head>
<body>
<input type="text" id="email" name="email" placeholder="Correo Electronico" onkeyup="validarEmail(this)">
<a id='resultado'></a>
</body>
</html>