JavaScript-表單驗證，需要用戶名/密碼驗證，但提交沒有問題

我確定我在這里遺漏了一些明顯的東西，但是我對此進行了很好的了解，梳理了拼寫錯誤等，但我看不出問題出在哪里。我希望這是一個簡單的表單，需要用戶名/密碼組合來驗證。必須匹配的用戶名/密碼尚未實施，因為我的初始測驗無法克服表單始終驗證的第一個障礙！

我確實在這方面做得很扎實，但我感覺很糟糕，我被困在這里，甚至查看了大量的參考資料并將它們與我自己的參考資料進行比較。我什至不確定事件偵聽器本身是否存在問題，或者問題是否來自函式中的不良編碼。在瀏覽器中打開控制臺也沒有顯示任何錯誤。有人能指出我的問題在哪里嗎？謝謝。

"use strict";

let loginform = document.forms.login;
loginform.addEventListener("submit", checkLogin);
let users = [];
let pwords = [];
users = ["Administrator", "Manager", "Cleric", "Scribe"];
pwords = ["Password01", "Password", "Admin", "P@ssword"];

//*** NOTE: the password for each username is specific. Use the the alignment of the data in the table above (i.e. the password for the Administrator account is Password01, etc.). ***


function checkLogin() {
  var usernameInput = loginform.getElementById("Username").value;
  var pwInput = loginform.getElementById("Password").value;

  //.includes is what we need for the array checking if statements

  //For Loop 1
  for (usernameInput in users) {
    if (!users.includes(usernameInput)) {
      window.event.preventDefault();
      alert("Your username is incorrect. Please try again.")
      loginform.user.focus();
      return false;
    } else {
      //For Loop 2
      for (pwInput in pwords) {
        if (!pwords.includes(pwInput)) {
          window.event.preventDefault();
          alert("Your password is incorrect. Please try again.")
          loginform.pword.focus();
          return false;
        }
      }
    }
  }
}

<h1 id="main">Login to Umbrella Corporation</h1>
<div id="container">
  <form name="login" action="success.html" method="POST">
    <input type="text" name="user" id="Username">
    <br>
    <br>
    <input type="password" name="pword" id="Password">
    <br>
    <br>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </form>
</div>

uj5u.com熱心網友回復：

表單元素沒有 getElementById。

更改為其中之一

var usernameInput = loginform.user.value;
var pwInput = loginform.pword.value;


var usernameInput = loginform.querySelector("#Username").value;
var pwInput = loginform.querySelector("#Password").value;


var usernameInput = document.getElementById("Username").value;
var pwInput = document.getElementById("Password").value;

您不需要回圈然后使用包含

if (!users.includes(usernameInput)) 

足夠的

這是一個優化的測驗

function checkLogin(e) { // event is available here
  const usernameInput = loginform.user.value;
  const pwInput = loginform.pword.value;
  if (!users.includes(usernameInput)) {
    e.preventDefault();
    alert("Your username is incorrect. Please try again.")
    loginform.user.focus();
    return false;
  } / no need for else after a return
  if (!pwords.includes(pwInput)) {
    e.preventDefault();
    alert("Your password is incorrect. Please try again.")
    loginform.pword.focus();
  }
}

uj5u.com熱心網友回復：

我認為這里的問題是您正在嘗試使用提供的輸入回圈遍歷您的資料：

var usernameInput = loginform.getElementById("Username").value;

for (usernameInput in users) {...}

這行不通。您可以做的是查找用戶提供的用戶名是否存在于陣列中。

var usernameInput = loginform.getElementById("Username").value;

const userIndex = users.indexOf(usernameInput);

如果找到用戶，它將回傳一個有效的索引，否則它會回傳一個-1. 您可以使用它向用戶拋出錯誤。

您可以對密碼執行相同操作：

var pwInput = loginform.getElementById("Password").value;

const pwIndex = pwords.indexOf(pwInput);

在最后檢查時，您可以比較兩個索引。如果它們相等，則它們是正確的組合，否則它是不正確的用戶名/密碼組合。

if(pwIndex === userIndex && pwIndex !== -1){...} // Success
else {...} // Failure

最后，你的 JavaScript 應該是這樣的：

    function checkLogin() {
      var usernameInput = loginform.getElementById("Username").value;
      var pwInput = loginform.getElementById("Password").value;

      //.includes is what we need for the array checking if statements

      const userIndex = users.indexOf(usernameInput);
      const pwIndex = pwords.indexOf(pwInput);

      if(userIndex === -1 || pwIndex === -1) {
          alert("Your username/password is incorrect"); // Always better to provide a generic error. You don't want malicious users to know which part they're getting wrong.
      }
    }

標籤：javascripthtml形式验证事件监听器

上一篇：從序列呼叫類時顯示錯誤

下一篇：一個驗證規則中的多個輸入