Question

我想让我的表格不要重置。我正在制作一个<input type="password" />，每当我点击按钮提交密码时，他们就错了，我需要有一些东西表明它是不正确的。它有效，但只有一瞬间。你能救我吗？

＆＃13;

function desktop() {

  var pass = document.getElementById("pass").value;
  if (pass == "555") {
    alert("Welcome;")
  } else {
    document.getElementById("wrg").innerHTML = "Incorrect Password";

  }

}

＆＃13;

#pass {
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 5px;
}

#user {
  margin-bottom: 10px;
  padding-bottom: 0px;
  margin-top: 220px;
}

#wrg {
  visibility: visible;
}

＆＃13;

<form>
  <center>
    <h1 id="user">User</h1>
    <input type="password" id="pass" placeholder=" Password" /><br>
    <button onclick="desktop()" id="pass">Sign In</button>
    <p id="wrg"></p>
  </center>
</form>

＆＃13;

Answer 1

该按钮最终会提交表单，导致窗口刷新，因为表单上没有action属性。

您可以通过按下type="button"（而不是默认submit），使用event.preventDefault()或返回false来阻止此操作，如下所示。（但正如下面的评论中所述，return false可能不是最佳方法：很容易忘记在函数和return属性中包含onclick，否则表单将会无论如何提交。event.preventDefault是最明确的，因此可能是解决此问题的最佳方式。）

function desktop() {
  var pass = document.getElementById("pass").value;
  if (pass == "555") {
    alert("Welcome;")
  } else {
    document.getElementById("wrg").innerHTML = "Incorrect Password";
  }
  return false;
}

#pass {
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 5px;
}

#user {
  margin-bottom: 10px;
  padding-bottom: 0px;
  /*margin-top: 220px;*/
}

<form>
  <center>
    <h1 id="user">User</h1>
    <input type="password" id="pass" placeholder=" Password" /><br>
    <button onclick="return desktop()">Sign In</button>
    <p id="wrg"></p>
  </center>
</form>

（您确实有重复的pass ID，这些ID应该是唯一的，当然，客户端身份验证在此处完成并非一点安全，但这些问题都与您的问题无直接关系。{{ 1}}结束返回第一个匹配元素，恰好是你想要的元素。）

Answer 2

您正在为按钮和输入元素使用重复的ID：pass。

此外，将一个事件监听器添加到“登录”按钮并在您的函数中捕获该事件会更容易。

document.getElementById("pass").addEventListener('click', desktop);

function desktop(evt) {
  evt.preventDefault();
  var pass = document.getElementById("pass").value;
  if (pass == "555") {
    alert("Welcome;");
  } else {
    document.getElementById("wrg").innerHTML = "Incorrect Password";
  }
}

如果你这样做，请记住从按钮中删除onclick属性。

Answer 3

你是说表格中的字段是重置的，还是你说id为'wrg'的段落元素没有停留？

要保持表单字段不被重置，您应该将所有表单值传递给PHP文件，以便您可以解析该文件。如果您发现密码不正确，请将用户带回到相同的表单中，并返回相同的值以及表单周围的任何其他帮助元素。

要获取id为“wrg”的元素，您必须知道HTML表单的工作原理。发送HTML表单后，页面通常会重新加载，并且由于您没有为表单指定“操作”，因此将其发送到同一文件。我相信你遇到了麻烦，因为表单正在重新加载页面。

在旁注中请确保您在服务器后端解析密码，因为用户可以禁用JavaScript并绕过您的密码验证过程。

我可能错了，但我希望这会对你有所帮助:)。

document.getElementById JS HTML CSS

3 个答案: