如何让这个输入表单验证检查正确？

问题描述 投票：0回答：2

我有任务在 js/jquery 中制作这个表单。代码在错误方面看起来不错（将表单着色为红色并抛出错误），但它应该将输入表单着色为绿色以获得正确的用户名和密码，或者如此（如果一种形式很好，则将其着色为绿色，但其他形式则为红色等。 ）我不明白为什么它不适用于正确的输入。此外，我们还必须在右侧的输入表单中分别放置带有复选标记和 x（错误）的图标（不知道我是怎么做的，他们在课堂上在线提到了一些图标库，但从未向我们展示如何使用它们）。

document.getElementById("login-form").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent form submission

  // Reset previous validation styles
  document.getElementById("username").classList.remove("invalid");
  document.getElementById("password").classList.remove("invalid");
  document.getElementById("username").classList.remove("valid");
  document.getElementById("password").classList.remove("valid");
  document.getElementById("error-messages").innerHTML = "";
  document.getElementById("username-error").textContent = "";
  document.getElementById("password-error").textContent = "";

  // Get input values
  var username = document.getElementById("username").value.trim();
  var password = document.getElementById("password").value.trim();

  var errors = [];

  // Validate username and password
  if (username === "") {
    document.getElementById("username").classList.add("invalid");
    document.getElementById("username-error").textContent = "Please, enter username";
    errors.push("Username is required.");
  } else if (username !== "new_user") {
    document.getElementById("username").classList.add("invalid");
    document.getElementById("username-error").textContent = "Please, enter valid username";
    errors.push("Invalid username.");
  }

  if (password === "") {
    document.getElementById("password").classList.add("invalid");
    document.getElementById("password-error").textContent = "Please, enter password";
    errors.push("Password is required.");
  } else if (password !== "123456789") {
    document.getElementById("password").classList.add("invalid");
    document.getElementById("password-error").textContent = "Please, enter valid password";
    errors.push("Invalid password.");
  }

  // Display error messages
  if (errors.length > 0) {
    var errorMessageHTML = "<ul class='error-message'>";
    errors.forEach(function(error) {
      errorMessageHTML += "<li>" + error + "</li>";
    });
    errorMessageHTML += "</ul>";
    document.getElementById("error-messages").innerHTML = errorMessageHTML;
  } else {
    // Successful login
    document.getElementById("username").classList.add("valid");
    document.getElementById("password").classList.add("valid");
    document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>";
  }
});
body {
  box-sizing: border-box;
  font-family: sans-serif;
}

#login-container {
  width: 460px;
  margin: 0 auto;
}

form label,
form input {
  width: 100%;
  box-sizing: border-box;
}

form input {
  padding: 8px;
}

form label {
  font-weight: bold;
}

form div {
  margin: 16px 0px;
}

.invalid {
  border: 2px solid red;
}

.valid {
  border: 2px solid green;
}

.error-message {
  color: red;
  margin-top: 8px;
}

.success-message {
  color: green;
  margin-top: 8px;
}
<div id="login-container">

  <form id="login-form">
    <div>
      <label for="username">Username:</label>
      <input id="username" type="text">
      <span id="username-error" class="error-message"></span>
    </div>

    <div>
      <label for="password">Password:</label>
      <input id="password" type="password">
      <span id="password-error" class="error-message"></span>
    </div>

    <input type="submit" value="Login">
  </form>

  <div id="error-messages"></div>
</div>

javascript validation variable-assignment
2个回答
0
投票

我会回答一个问题，因为你一次只能问一个问题

将输入表单涂成绿色以获得正确的用户名和密码

使用classList.toggle：

  // Validate username
    document.getElementById("username").classList.toggle("invalid",username === "" || username !== "new_user");  
    document.getElementById("username").classList.toggle("valid",username === "new_user");  
  if (username === "") {
    document.getElementById("username-error").textContent = "Please, enter username";
    errors.push("Username is required.");
  } else if (username !== "new_user") {
    document.getElementById("username-error").textContent = "Please, enter valid username";
    errors.push("Invalid username.");
  }

密码相同。

document.getElementById("login-form").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent form submission

  // Reset previous validation styles
  document.getElementById("username").classList.remove("invalid");
  document.getElementById("password").classList.remove("invalid");
  document.getElementById("username").classList.remove("valid");
  document.getElementById("password").classList.remove("valid");
  document.getElementById("error-messages").innerHTML = "";
  document.getElementById("username-error").textContent = "";
  document.getElementById("password-error").textContent = "";

  // Get input values
  var username = document.getElementById("username").value.trim();
  var password = document.getElementById("password").value.trim();

  var errors = [];

  // Validate username and password
  document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user");
  document.getElementById("username").classList.toggle("valid", username === "new_user");
  if (username === "") {
    document.getElementById("username-error").textContent = "Please, enter username";
    errors.push("Username is required.");
  } else if (username !== "new_user") {
    document.getElementById("username-error").textContent = "Please, enter valid username";
    errors.push("Invalid username.");
  }

  document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789");
  document.getElementById("password").classList.toggle("valid", password === "123456789");
  if (password === "") {
    document.getElementById("password-error").textContent = "Please, enter password";
    errors.push("Password is required.");
  } else if (password !== "123456789") {
    document.getElementById("password-error").textContent = "Please, enter valid password";
    errors.push("Invalid password.");
  }

  // Display error messages
  if (errors.length > 0) {
    var errorMessageHTML = ['<ul class="error-message">', ...errors.map(error => `<li>${error}</li>`), '</ul>'];
    document.getElementById("error-messages").innerHTML = errorMessageHTML.join('');
  } else {
    // Successful login
    document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>";
  }
});
body {
  box-sizing: border-box;
  font-family: sans-serif;
}

#login-container {
  width: 460px;
  margin: 0 auto;
}

form label,
form input {
  width: 100%;
  box-sizing: border-box;
}

form input {
  padding: 8px;
}

form label {
  font-weight: bold;
}

form div {
  margin: 16px 0px;
}

.invalid {
  border: 2px solid red;
}

.valid {
  border: 2px solid green;
}

.error-message {
  color: red;
  margin-top: 8px;
}

.success-message {
  color: green;
  margin-top: 8px;
}
<div id="login-container">

  <form id="login-form">
    <div>
      <label for="username">Username:</label>
      <input id="username" type="text">
      <span id="username-error" class="error-message"></span>
    </div>

    <div>
      <label for="password">Password:</label>
      <input id="password" type="password">
      <span id="password-error" class="error-message"></span>
    </div>

    <input type="submit" value="Login">
  </form>

  <div id="error-messages"></div>
</div>

-1
投票

控制业务逻辑（例如查找表）的数据也需要处于源代码控制中。开发人员需要一种轻松创建本地数据库的方法。共享数据库只能通过构建服务器更新。1

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.