Home / Questions / 303346
Accepted
Flowcou
Asked: 2020-10-25 07:09:24 +0800 CST 2020-10-25 07:09:24 +0800 CST

添加三个 JavaScript 密码验证尝试

  • 772

我正在做一个 JS 练习，他们要求我输入一个有要求的密码，如果我第三次尝试目标错误，您将无法继续在输入中输入数据。问题是我有实时验证，在你正确输入单词之前，它总是无效的。我留下我的代码。

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";

        }
    });
javascript

2 Answers

  1. Best Answer

    您可以使用 abutton来验证密码，通过添加一个计数器，我们将知道它需要多少次尝试，在第三次错误尝试时，该按钮validar将被阻止。

    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>

    • 1

  2. 通过向事件添加侦听器input，您所做的就是在每次该字段发生变化时进行评估，在这种情况下，每个按键都被按下。

    也就是说，如果您正在编写的部分文本没有验证，它将被视为不正确。在您的正则表达式中，最少为 8 个字符，无论它是什么，它总是会在我们按下的第三个键上无效。

    除此之外，计数器应该关闭，以免在每个事件上都重置计数器。为了使测试更舒适，在正则表达式中，我只在输入数字时才放得很好。

    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>

    • 1