Question

如何尝试3次后禁用“提交”按钮？这就是全部代码（感谢DCR，这对javascript有所帮助）

/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function pasuser(form) {
if (form.identifier.value=="GG") { 
if (form.pass.value=="123") { 
  window.location('https://www.google.com/');
} else {
alert("Invalid Password");
}

} else {  alert("Invalid UserID");
}
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/style.css">
  <script src="/server.js"></script>
  <title></title>
</head>
<body>
  <div class="box">
    <h2>Login</h2>
    <form>
      <div class="inputBox">
        <input type="text" name="identifier" required="">
        <label>Username</label>
      </div>
      <div class="inputBox">
        <input type="password" name="pass" required="">
        <label>Password</label>
      </div>
      <input type="button" value="Submit" onclick="pasuser(form)">
    </form>
  </div>
</body>
</html>

Answer 1

一种方法是添加一个计数器，如果计数器达到3并且凭据仍然错误，则隐藏/删除按钮。

但是，在服务器端执行此操作要安全得多！

以下是基于您的代码的JavaScript客户端解决方案，但同样，仅在客户端进行检查并不安全。

/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
var button = document.getElementById("submitBtn");
var attempts = 0;
function pasuser(form) {
  attempts++;
    if (form.identifier.value=="GG") { 
      if (form.pass.value=="123") { 
        attempts = 0;
        window.location('https://www.google.com/');
      } else {
        alert("Invalid Password");
        button.style.display = attempts === 3 ? "none" : "block";
      }

    } else {  alert("Invalid UserID");
      button.style.display = attempts === 3 ? "none" : "block";
    }
  
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/style.css">
  <script src="/server.js"></script>
  <title></title>
</head>
<body>
  <div class="box">
    <h2>Login</h2>
    <form>
      <div class="inputBox">
        <input type="text" name="identifier" required="">
        <label>Username</label>
      </div>
      <div class="inputBox">
        <input type="password" name="pass" required="">
        <label>Password</label>
      </div>
      <input id="submitBtn" type="button" value="Submit" onclick="pasuser(form)">
    </form>
  </div>
</body>
</html>

Answer 2

var trieds = 0;
function pasuser(form) {
    if (form.identifier.value=="GG") {
        if (form.pass.value=="123") {
            window.location = 'https://www.google.com/';
        } else {
            alert("Invalid Password");
            trieds += 1;
        }
    } else {  
        alert("Invalid UserID");
        trieds += 1;
    }
    //Change <input type='button'> for <button>
    document.querySelector("button").disabled = (trieds === 3) ? true : false;
}

3次尝试使用javascript后，如何禁用按钮？

2 个答案: