0

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?

1 respuesta 1

1

Tienes dos pequeños problemas.

El primero es que la segunda expresión regular está utilizando \d, lo cual sería valido en un objeto tipo expresión regular. Pero no es tu caso: realmente estás manejando un string que luego utilizas para construir una expresión regular. Y en los strings las contrabarras han de escaparse con otra contrabarra \\. Por lo tanto en tu string deberías utilizar \\d o alguna alternativa como [0-9]

Una vez solucionado, la primera expresión regular no acaba de funcionar del todo bien porque permite textos de más de 20 posiciones. Esto es debido a que no dices desde donde debe empezar a contar. Así que incluso en un texto de 1000 caracteres siempre hay una parte en la que puedes encontrar entre 8 y 20 caracteres.

Lo suyo sería utilizar inicio y fin de línea como: ^.{8,20}$

En la segunda expresión regular no es necesario, porque lo único que te interesa es encontrar ciertos caracteres.

Finalmente, deshabilitaría el modificador global "g" ya que no quieres hacer varias búsquedas sobre el mismo texto, si no validar si éste cumple con tu expresińo regular.

Tras los cambios quedaría así:

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",
      "(?=.*[0-9])(?=.*[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);
        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>

1
  • Muchas gracias, no me había percatado de escapar la contrabarra.
    – Tiberius
    Commented el 3 mar. 2019 a las 19:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.