javascript - 在Javascript中同时显示多个密码的任何方式？

Question

如果可以同时显示/隐藏密码，我正在尝试寻找解决方案？

我只能显示/隐藏第一个原始密码。有没有人知道它的解决方案，或者是否有可能？

这是JavaScript和HTML代码

function Toggle() {
  let btt = password
  if (btt.type === "password") {
    btt.type = "text";
  } else {
    btt.type = "password";
  }
}

function checkPassword(register) { //correct
  let fisrtPassword = register.password.value;
  let retypedPassword = register.retypedpassword.value;
  if (fisrtPassword === retypedPassword) {
    return true;
  } else {
    passwordMatchError.setAttribute("class", "error");
    passwordMatchError.innerHTML = ("Passwords do not match. Please retype");
    return false;
  }
}

标签： javascripthtmlcssuser-interfacedom

Answer 1

尝试这个。请注意，我从密码字段单击中删除了切换，并为这些字段提供了一个类

我还简化了您的提交处理程序并修复了拼写并添加了必需

document.getElementById("showpasswords").addEventListener("click",function() {
  [...document.querySelectorAll(".password")].forEach(p =>
    p.type = p.type === "password" ? "text" : "password"
  )
})
document.getElementById("registerdetails").addEventListener("submit", function(e) {
  const errSpan = document.getElementById("passwordmatcherror");
  let firstPassword = this.password.value;
  let retypedPassword = this.retypedpassword.value;
  errSpan.classList.toggle("error", firstPassword !== retypedPassword);

  if (firstPassword !== retypedPassword) {
    errSpan.innerHTML = ("Passwords do not match. Please retype");
    e.preventDefault();
  }
});

<section>
  <div id="formcontainer">
    <form id="registerdetails" action="fma_t3confirm.html">
      <div>
        <label for="password">* Password (Must be 8 characters and include one uppercase, one lowercase and
						one numeric):</label><br/>
        <input type="password" class="password" id="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,8}$" required>
        <label><input type="checkbox" id="showpasswords"> Show passwords</label>
      </div>
      <div>
        <label for="retypedpassword">* Retype your password:</label><br/>
        <input type="password" class="password" id="retypedpassword">
        <span id="passwordmatcherror"></span>
      </div>
      <input type="submit" />
    </form>
  </div>
</section>