Quiero mostrar varios mensajes con el customValidity() para mostrar que le falla al usuario.
Tengo esto pero creo que me falla la expresión regular
.
window.addEventListener("load", function() {
let usuario = false;
let contra = false;
document.querySelector("#pass").addEventListener("input", function() {
contra = pass();
});
document.querySelector("#submit").addEventListener("click", function(e) {
if (document.forms[0].checkValidity()) {
e.preventDefault();
if (contra) {
console.log("valida");
}
}
});
function pass() {
let cont = 0;
let pass = document.querySelector("#pass");
let regex = {
".{8,20}": "El nombre de usuario tiene que tener un mínimo de 8 caracteres",
"(?=.*\d)(?=.*[a-zA-Z])(?=.*[@#$%&_])": "El nombre de usuario debe contener un dígito, una letra y uno de los siguientes caracteres especiales (@#$%&_)",
};
if (pass.value == "")
pass.setCustomValidity("Completa este campo");
else {
for (let i in regex) {
let reg = new RegExp(i, "g");
let valida = reg.test(pass.value);
if (valida === false) {
cont++;
pass.setCustomValidity(regex[i]);
break;
}
pass.setCustomValidity("");
}
}
if (cont == 0)
return true;
else
return false;
}
});
body {
margin-left: 1em;
}
div {
margin-bottom: 1.1em;
}
input {
font-size: 100%;
width: 210px;
box-sizing: border-box;
padding: .2em;
}
button {
width: 120px;
box-sizing: border-box;
}
.titulos {
display: block;
margin: .5em 0 .4em 0;
font-weight: bolder;
color: grey;
}
<form action="">
<div>
<label for="pass" class="titulos">Contraseña</label>
<input type="password" id="pass" required>
</div>
<button type="submit" id="submit">Registro</button>
</form>
¿Cómo se harían las expresiones regulares
para mostrar un mensaje en cada caso?