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> ，而是单击了Submit <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> 

执行此操作的另一种方法-老实说，如果我在此问题之前熟悉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 ；第一个代码段将在所有浏览器中对表单进行验证。）

Answer 2

您未在此处获取所选ID的值。 如果是IF格式，请先尝试以下代码。 我希望这是唯一的原因。

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