2

estoy con un ejercicio de JS donde me piden meter una contraseña con un requisitos y que si al tercer intento la meta mal, no puedas seguir metiendo datos en el input. El problema es que lo tengo con validación al tiempo real, el cual hasta que no metes la palabra bien, es invalido siempre. Dejo mi código.

document
    .getElementById('campo')
    .addEventListener('input', function(evt) {
        const campo = evt.target,
            valido = document.getElementById('campoOK'),

            regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$%*&\-\_])[A-Za-z\d$@$%*&\-\_]{8,16}$/;

        if (regex.test(campo.value)) {
            valido.innerText = "válido";

        } else {
            valido.innerText = "incorrecto";

        }
    });
2
  • Qués es lo que validas con esa Regex? Commented el 24 oct. 2019 a las 15:42
  • que al menos tenga un numero, una mayus otra minus, un caracter especial y que este en el rango entre 8 y 16 letras
    – Flowcou
    Commented el 24 oct. 2019 a las 15:50

2 respuestas 2

1

Puedes hacerlo con un button para validar la contraseña, agregando un contador sabremos cuántos intentos lleva, al tercer intento erróneo el botón de validar se bloqueará.

document.getElementById('validar').addEventListener('click', valida);

let contador = 1;
function valida(){

        const campo = document.getElementById('campo');
            valido = document.getElementById('campoOK'),

            regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$%*&\-\_])[A-Za-z\d$@$%*&\-\_]{8,16}$/;

        if (regex.test(campo.value)) {
            valido.innerHTML = "válido";

        } else {
            valido.innerHTML = "incorrecto";
            console.log(`Intento: ${contador}`);
            if(contador === 3){
              document.getElementById('validar').disabled = 'true';
            }
            contador++;
        }

}
<input type="text" id="campo">
<button id="validar">Validar</button>
<div id="campoOK"></div>

2
  • Muchas gracias!!
    – Flowcou
    Commented el 24 oct. 2019 a las 16:16
  • Un gusto mi estimado! :) Commented el 24 oct. 2019 a las 16:16
1

Agregando un listener al evento input lo que haces es evaluar cada vez que hay un cambio en dicho campo, en este caso cada tecla que se presiona.

Osea que si el texto parcial que está escribiendo no valida, se va a contar como incorrecto. Como en tu regex el mínimo es 8 caracteres, siempre va a dar inválido en la tercer tecla que presionemos, cualquiera sea.

Además de eso, el contador debería estar fuera, para no reiniciar el contador en cada evento. Para hacer mas cómodo el testeo, en la regex pongo por bueno solo si ingresan números.

let intentos = 0;

document
  .getElementById('validar')
  .addEventListener('click', function(evt) {
    const campo = document.getElementById('campo'),
      valido = document.getElementById('campoOK')


    if (intentos >= 3) {
      return;
    }

    if (/^\d+$/g.test(campo.value)) {
      valido.innerText = "válido";
      intentos = 0;

    } else {
      intentos++;
      valido.innerText = "incorrecto, intentos: " + intentos;

      if (intentos >= 3) {
        valido.innerText = "Nunca mas vas a poder intentar";
      }
    }
  });
<input id="campo" type="text"><button id="validar">validar</button>
<div id="campoOK"></div>

</div>

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.