[英]Password verification for webpage in html and javascript
I have a registration webpage where a user inputs information like name and password. 我有一个注册网页,用户可以在其中输入名称和密码等信息。 There are two inputs for password to verify they are the same password but when I submit the form, it says the passwords don't match, even when they do.
密码有两个输入,以确认它们是相同的密码,但是当我提交表单时,它说密码不匹配,即使密码相同也是如此。
<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>
There are two problems with your code. 您的代码有两个问题。
<form>
element. <form>
元素上的onclick处理程序中。 This means the script will never run at all, because the user doesn't click on the <form>
, they click on the submit <button>
. <form>
,而是单击了Submit <button>
。 Instead use an onsubmit handler on the form. return false
from the onsubmit handler. return false
。 Here is a corrrected version: 这是正确的版本:
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>
Another way to do this -- and to be honest if I'd been familiar with setCustomValidity before this question, this probably would have been my answer in the first place -- might be to set the customValidity message values when the field values change, instead of on form submit. 执行此操作的另一种方法-老实说,如果我在此问题之前熟悉setCustomValidity,那么这可能首先是我的答案-可能是在字段值更改时设置customValidity消息值,而不是在表单上提交。 (If a customValidity value is set, it will prevent the form submit from running at all.)
(如果设置了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>
(But note that this will leave your forms unvalidated in IE9 and below, which do not support setCustomValidity
; the first snippet will validate the form in all browsers.) (但是请注意,这将使您的表单在IE9及以下版本中无效,并且不支持
setCustomValidity
;第一个代码段将在所有浏览器中对表单进行验证。)
You did not take the values of the selected ids here. 您未在此处获取所选ID的值。 Inatead of taking values after in IF case try the following code.
如果是IF格式,请先尝试以下代码。 I hope that is the only reason.
我希望这是唯一的原因。
var password = document.getElementById("password").value;
var repeat_password = document.getElementById("repeat_password").value;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.