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. 如果密码值与不匹配，您不会采取任何行动来防止表格提交。一种方法是从Onsubmit处理程序到return false。

这是一个相关版本：

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>

做到这一点的另一种方法 - 老实说，如果我在这个问题之前熟悉setCustomVality，这可能首先是我的答案 - 可能是在字段时设置CustomVality Message值值更改，而不是表单提交。(如果设置了CustomVality值，它将阻止表格提交完全运行。(

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；第一个片段将在所有浏览器中验证表单。(

Answer 2

您没有在此处使用所选ID的值。如果在情况下尝试以下代码，请在此之后进行值。我希望这是唯一的原因。

var password = document.getElementById("password").value; 
var repeat_password = document.getElementById("repeat_password").value;