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">
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadEn 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>