生成Javascript密码验证器的问题



我正在开发一个密码匹配验证器,但被卡住了。看起来代码的结构是正确的,但不管怎样,它都会读取匹配的密码。我也想知道我在不重新加载页面的情况下让事件继续验证方面做错了什么,我希望event++能完成这项工作。

这是Javascript

<script>
const pass1 = document.getElementById("password1");
const pass2 = document.getElementById("password2");
const p = document.getElementById("confirm")
function passCheck () {
if (pass1 !== pass2)   {
return p.innerHTML= "Passwords do not match";
}
else {
return p.innerHTML="Passwords match";
}
}
pass2.addEventListener("keyup", function() {
event++;
passCheck(pass1, pass2);})
</script> 

这是HTML

<body>
<div class="rSide">
<div class="formBox">
<form action="#" method="post">
<div class="formLabel">
<label for="FName">First name</label>
<input type="text" id="FName" name="FName" placeholder="Your First Name" required>
</div>
<div class="formLabel">
<label for="LName">Last Name</label>
<input type="text" id="LName" name="LName" placeholder="Your Last Name" required>
</div>
<div class="formLabel">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="formLabel">
<label for="phone">Phone Number</label>
<input type="number" id="phone" name="phone" placeholder="Your Phone Number" required>
</div>
<div class="formLabel">
<label for="password1">Password</label>
<input type="text" id="password1" name="password1" required>
</div>
<div class="formLabel">
<label for="password2">Confirm Password</label>
<input type="text" id="password2" name="password2" required>
<p id="confirm"></p>
</div>
<button type="submit" class="account">Create Account</button><br>
</form>
</div>

<p>Already have an account? <a>Log in</a></p>
</div>
</div>
</body>

您将获得元素:

const pass1 = document.getElementById("password1");

您想要的是

const pass1 = document.getElementById("password1").value;

或者,如果您需要以其他方式引用元素(例如调用pass2.addEventListener时(,您可以在比较期间引用值:

if (pass1.value !== pass2.value) {

无论您想要构建什么样的代码,都取决于您自己。需要记住的要点是,当您引用整个HTML元素时,以及当您只想要该元素中的.value(特别是<input>元素(时。


顺便说一句,您将参数传递给一个不需要任何参数的函数:

passCheck(pass1, pass2);

要么将参数添加到函数本身,要么继续在函数中使用全局范围的变量,并且不向其传递任何信息:

passCheck();

最新更新