构建了一个登录表单脚本，但它不能使用 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">

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

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

  <button>login</button>

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

  </p>

</form>

将此应用于您的登录表单后，您可以通过执行document.login.

在 JavaScript 中利用原生 HTML 事件

您检索用户名和密码的方式非常复杂，您可以在 JavaScript 中添加一个事件侦听器并处理其中的所有内容：

const loginForm = document.login;

loginForm.addEventListener("submit", validate);

这将在validate每次提交表单时调用。此外，它将事件作为参数发送，因此您可以在函数中像这样接收它：

function validate(event) {

  event.preventDefault(); // Stop form redirection

  let user = event.target.user.value,

      pass = event.target.pass.value;

  // REST OF THE CODE ...

}

这更容易，因为我们向输入添加了名称属性，因此我们可以通过user和来识别它们pass。

验证

注意：我不建议直接在浏览器中验证 username:password 数据，因为这是一个很大的漏洞，必须在服务器端验证。

您可以通过将用户名与其密码绑定在一个对象中来简化此验证，而不是创建两个数组：

const accounts = {

  "[e-mail]": "welcome1",

  "[e-mail]": "w3lc0m3",

  "[e-mail]": "ch1c@g0"

};

然后，将输入值保存在user和pass变量中，您可以执行以下操作：

if (accounts[user] == pass) {

    //SUCCESSFUL LOGIN

    console.log('Correct. Logged in!');

  } else {

    //WRONG LOGIN CREDENTIALS

    attempts--;

    validateAttempts();

}

为了避免看到大量代码，您应该创建另一个函数，它的唯一工作是验证是否应该阻止用户。

结果

我应该提到，这仅适用于验证用户表单，如果您需要保存会话并保持用户登录，则必须使用服务器端语言。

我给你留下了所有这些变化都有效的片段，你自己看看：

const accounts = {

  "[e-mail]": "welcome1",

  "[e-mail]": "w3lc0m3",

  "[e-mail]": "ch1c@g0"

};

const loginForm = document.login;

let attempts = 3;

loginForm.addEventListener("submit", validate);

function validate(event) {

  event.preventDefault();

  let user = event.target.user.value,

      pass = event.target.pass.value;

  if (accounts[user] == pass) {

    //SUCCESSFUL LOGIN

    console.log('Correct. Logged in!');

  } else {

    console.log('Wrong username or password.');

    attempts--;

    validateAttempts()

  }

}

function validateAttempts() {

  if (attempts <= 0) {

    console.log("You are now blocked");

    loginForm.user.value = "You are now blocked";

    loginForm.pass.value = "You are now blocked";

    loginForm.user.disabled = true;

    loginForm.pass.disabled = true;

  }

}

<form name="login" class="login-form">

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

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

  <button>login</button>

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

  </p>

</form>