javascript - html 和 javascript 网页的密码验证

Question

我有一个注册网页，用户可以在其中输入名称和密码等信息。有两个密码输入来验证它们是相同的密码，但是当我提交表单时，它说密码不匹配，即使它们匹配。

<form id="registration-info" method="POST" action="/registration" >

...

<div class="mb-3">
                <label for="password">Password</label>
                <input type="password" class="form-control" name="password" id="password" required>
                <div class="invalid-feedback">
                    Please enter a password.
                </div>
            </div>

            <div class="mb-3">
                <label for="repeat_password">Repeat Password</label>
                <input type="password" class="form-control" name="repeat_password" id="repeat_password" required>
                <script>
                    form = document.getElementById("registration-info");
                    form.onclick = function() {
                        var password = document.getElementById("password");
                        var repeat_password = document.getElementById("repeat_password");

                        if(password.value != repeat_password.value) {
                            repeat_password.setCustomValidity("Passwords Don't Match");
                        } else {
                            repeat_password.setCustomValidity('');
                        }
                    }
                </script>

            </div>

Answer 1

您的代码有两个问题。

1. 您已将验证代码放入 <form> 上的 onclick 处理程序中元素。这意味着该脚本根本不会运行，因为用户没有单击 <form> ，他们点击提交<button> 。而是在表单上使用 onsubmit 处理程序。
2. 如果密码值不匹配，您不会采取任何措施来阻止表单提交。一种方法是 return false来自 onsubmit 处理程序。

这是一个更正的版本:

form = document.getElementById("registration-info");

form.onsubmit = function() {
  var password = document.getElementById("password");
  var repeat_password = document.getElementById("repeat_password");
  if (password.value != repeat_password.value) {
    repeat_password.setCustomValidity("Passwords Don't Match");
    console.log("Passwords don't match");
    return false; // prevent the form from submitting
  } else {
    repeat_password.setCustomValidity('');
  }
}
 
// reset the customValidity when the field is modified, so corrected
// values won't trip up on past errors:
document.getElementById("repeat_password").onchange = function(e) {
  e.target.setCustomValidity('')
}

.invalid-feedback {display:none}

<form id="registration-info" method="POST" action="/registration">
  <div class="mb-3">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" id="password" required>
    <div class="invalid-feedback">
      Please enter a password.
    </div>
  </div>

  <div class="mb-3">
    <label for="repeat_password">Repeat Password</label>
    <input type="password" class="form-control" name="repeat_password" id="repeat_password" required>
  </div>
  <input type="submit" value="Submit" id="registration-info-submit">
</form>

执行此操作的另一种方法 - 说实话，如果我在这个问题之前熟悉 setCustomValidity，这可能就是我的答案 - 可能是在字段时设置 customValidity 消息值值发生变化，而不是在表单提交时发生变化。 (如果设置了 customValidity 值，它将根本阻止表单提交运行。)

document.getElementById("registration-info").onchange = function() {
  var password = document.getElementById("password");
  var repeat_password = document.getElementById("repeat_password");
  if (password.value != repeat_password.value) {
    repeat_password.setCustomValidity("Passwords Don't Match");
  } else {
    repeat_password.setCustomValidity('');
  }
}

<form id="registration-info" method="POST" action="/registration">
  <div class="mb-3">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" id="password" required>
  </div>

  <div class="mb-3">
    <label for="repeat_password">Repeat Password</label>
    <input type="password" class="form-control" name="repeat_password" id="repeat_password" required>
  </div>
  <input type="submit" value="Submit" id="registration-info-submit">
</form>

(但请注意，这将使您的表单在 IE9 及更低版本中无法验证，因为它们不支持 setCustomValidity ；第一个代码段将在所有浏览器中验证表单。)