Tengo un input el cual ingreso direcciones de correo electrónico y éste solo me deja ingresar correos que terminan en .com
. Me gustaria agregarle otros dominios, además de ese, por ejemplo estos:
.cl
.net
.com.ar
Entre otros.
Dejo el codigo que tengo:
function ValidaEmail(valor, campo){
var mensaje = "";
// comprobar los posibles errores
if (this.value == "") {
mensaje = "El email no puede estar vacío";
} else if (this.value.indexOf("@") < 0) {
mensaje = "El email debe contener una @";
} else if (this.value.indexOf(".com", this.value.indexOf("@")) < 0){
mensaje = "El email debe contener .com detras de la @";
}
// mostrar/resetear mensaje (el mensaje se resetea poniendolo a "")
this.setCustomValidity(mensaje);
}
//id del input del correo
var email = document.querySelector("#correo");
// cuando se cambie el valor del campo o sea incorrecto, mostrar/resetear mensaje
email.addEventListener("invalid", ValidaEmail);
email.addEventListener("input", ValidaEmail);
Y este es un ejemplo:
function ValidaEmail(valor, campo){
var mensaje = "";
// comprobar los posibles errores
if (this.value == "") {
mensaje = "El email no puede estar vacío";
} else if (this.value.indexOf("@") < 0) {
mensaje = "El email debe contener una @";
} else if (this.value.indexOf(".com", this.value.indexOf("@")) < 0){
mensaje = "El email debe contener .com detras de la @";
}
// mostrar/resetear mensaje (el mensaje se resetea poniendolo a "")
this.setCustomValidity(mensaje);
}
//ID del input del email
var email = document.querySelector("#correo");
// cuando se cambie el valor del campo o sea incorrecto, mostrar/resetear mensaje
email.addEventListener("invalid", ValidaEmail);
email.addEventListener("input", ValidaEmail);
#correo{
font-family: 'Segoe UI';
border-radius: 5px;
border-style: solid;
border-width: 1px;
}
#mail{
font-family: 'Segoe UI';
}
button{
font-family: 'Segoe UI';
font-size: 14px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
background-color: white;
border-color: black;
}
<form action="#" method="POST">
<label id="mail">Ingresa un Correo</label>
<br><br>
<input type="text" name="correo" id="correo" required="required">
<br><br>
<button type="submit">GUARDAR</button>
</form>
Como muestro en el ejemplo, solo permite ingresar .com
al final del correo
¿Cómo podría agregar otras opciones? Que se pueda ingresar un dominio distinto a .com
.
Me gustaría intentar con la función que tengo antes de probar con otra.