构建了一个登录表单脚本，但它不能使用 JavaScript

Question

我正在尝试构建一个 login.js 脚本来监听登录表单提交事件。当我尝试运行我的代码时，它没有登录或正常工作

我正在使用要求使用的 JavaScript。我用 HTML 构建了登录表单，并在 JavaScript 中研究了登录功能。它不能是内联 JavaScript，它必须是一个独立于 HTML 的脚本。

var count = 2;

function validate() {

  var un = document.login.username.value;

  var pw = document.login.password.value;

  var valid = false;

  var usernameArray = ["[e-mail]",

    "[e-mail]",

    "[e-mail]"

  ]

  var passwordArray = ["welcome1", "w3lc0m3", "ch1c@g0"]

  for (var i = 0; i < usernameArray.length; i++) {

    if ((un == usernameArray[i]) && (pw == passwordArray[i])) {

      valid = true;

      break;

    }

  }

  if (valid) {

    alert("Login is successful");

    window.location = "index.html";

    return false;

  }

  var again = "tries";

  if (count == 1) {

    again = "try"

  }

  if (count >= 1) {

    alert("Wrong username or password")

    count--;

  } else {

    alert("Incorrect username or password, you are now blocked");

    document.login.username.value = "You are now blocked";

    document.login.password.value = "You are now blocked";

    document.login.username.disabled = true;

    document.login.password.disabled = true;

    return false;

  }

}

<!-- start of login form -->

<div class="login-page">

  <div class="form">

    <form class="register-form" onsubmit="return validate() ;" method="post">

      <input type="text" placeholder="username" />

      <input type="text" placeholder="password" />

      <input type="text" placeholder="email id" />

      <button>Create</button>

      <p class="message">Already registered? <a href="#">Login</a>

      </p>

    </form>

    <form class="login-form">

      <input type="text" placeholder="username" />

      <input type="text" placeholder="password" />

      <button>login</button>

      <p class="message">Not registered? <a href="#">Register</a>

      </p>

    </form>

  </div>

</div>

它需要允许我在代码中输入的三个登录信息才能登录该站点。登录时，它闪烁，好像在做某事，但不会去任何地方，也不表明该人已登录。

Answer 1

您没有使用返回语句正确验证，您的onsubmit属性也在注册表中。在表单上使用名称属性这将帮助您使用 JavaScript 轻松识别表单和输入，否则您可能无法识别较大表单中的哪个输入。<form name="login" class="login-form">&nbsp; <input name="user" type="text" placeholder="username" />&nbsp; <input name="pass" type="text" placeholder="password" />&nbsp; <button>login</button>&nbsp; <p class="message">Not registered? <a href="#">Register</a>&nbsp; </p></form>将此应用于您的登录表单后，您可以通过执行document.login.在 JavaScript 中利用原生 HTML 事件您检索用户名和密码的方式非常复杂，您可以在 JavaScript 中添加一个事件侦听器并处理其中的所有内容：const loginForm = document.login;loginForm.addEventListener("submit", validate);这将在validate每次提交表单时调用。此外，它将事件作为参数发送，因此您可以在函数中像这样接收它：function validate(event) {&nbsp; event.preventDefault(); // Stop form redirection&nbsp; let user = event.target.user.value,&nbsp; &nbsp; &nbsp; pass = event.target.pass.value;&nbsp; // REST OF THE CODE ...}这更容易，因为我们向输入添加了名称属性，因此我们可以通过user和来识别它们pass。验证注意：我不建议直接在浏览器中验证 username:password 数据，因为这是一个很大的漏洞，必须在服务器端验证。您可以通过将用户名与其密码绑定在一个对象中来简化此验证，而不是创建两个数组：const accounts = {&nbsp; "[e-mail]": "welcome1",&nbsp; "[e-mail]": "w3lc0m3",&nbsp; "[e-mail]": "ch1c@g0"};然后，将输入值保存在user和pass变量中，您可以执行以下操作：if (accounts[user] == pass) {&nbsp; &nbsp; //SUCCESSFUL LOGIN&nbsp; &nbsp; console.log('Correct. Logged in!');&nbsp; } else {&nbsp; &nbsp; //WRONG LOGIN CREDENTIALS&nbsp; &nbsp; attempts--;&nbsp; &nbsp; validateAttempts();}为了避免看到大量代码，您应该创建另一个函数，它的唯一工作是验证是否应该阻止用户。结果我应该提到，这仅适用于验证用户表单，如果您需要保存会话并保持用户登录，则必须使用服务器端语言。我给你留下了所有这些变化都有效的片段，你自己看看：const accounts = {&nbsp; "[e-mail]": "welcome1",&nbsp; "[e-mail]": "w3lc0m3",&nbsp; "[e-mail]": "ch1c@g0"};const loginForm = document.login;let attempts = 3;loginForm.addEventListener("submit", validate);function validate(event) {&nbsp; event.preventDefault();&nbsp; let user = event.target.user.value,&nbsp; &nbsp; &nbsp; pass = event.target.pass.value;&nbsp; if (accounts[user] == pass) {&nbsp; &nbsp; //SUCCESSFUL LOGIN&nbsp; &nbsp; console.log('Correct. Logged in!');&nbsp; } else {&nbsp; &nbsp; console.log('Wrong username or password.');&nbsp; &nbsp; attempts--;&nbsp; &nbsp; validateAttempts()&nbsp; }}function validateAttempts() {&nbsp; if (attempts <= 0) {&nbsp; &nbsp; console.log("You are now blocked");&nbsp; &nbsp; loginForm.user.value = "You are now blocked";&nbsp; &nbsp; loginForm.pass.value = "You are now blocked";&nbsp; &nbsp; loginForm.user.disabled = true;&nbsp; &nbsp; loginForm.pass.disabled = true;&nbsp; }}<form name="login" class="login-form">&nbsp; <input name="user" type="text" placeholder="username" />&nbsp; <input name="pass" type="text" placeholder="password" />&nbsp; <button>login</button>&nbsp; <p class="message">Not registered? <a href="#">Register</a>&nbsp; </p></form>