即使密码匹配，确认密码仍显示 "Passwords do not match"

Question

所以我创建了一个注册表单并添加了密码验证以确保密码和确认密码匹配。这里的想法是，当您最初输入密码时，您会收到 “密码不匹配”。

这是因为您没有在确认密码输入中重新输入密码。重新输入后，如果匹配，则应显示 密码匹配！。如果仍然不匹配，消息仍应显示 Passwords do NOT match.

我遇到的问题是，当密码最初匹配时，消息不会更改为 密码匹配，而是停留在 密码不匹配.

为了匹配，我必须返回密码输入，添加一个字符或删除一个字符，然后对确认密码执行相同操作。我在代码片段中提供了我的代码，以便您可以更好地理解我的解释。

有谁知道为什么会这样？

  var passConfirm = function() {
         if (document.getElementById("Password").value ==
             document.getElementById("ConfirmPassword").value) {
             document.getElementById("Message").style.color = "Green";
             document.getElementById("Message").innerHTML = "Passwords match!"
        } else {
            document.getElementById("Message").style.color = "Red";
            document.getElementById("Message").innerHTML = "Passwords do NOT match!"
        }
    }

<div class="container">
    <form class="form" onsubmit="validateForm(event)">
       <div>
            <label id="FullNameLabel">Full Name</label></br>
              <input 
                type="text" 
                placeholder="John Doe" 
                id="FullName">
            </input>
        </div>
        <div>
            <label id="EmailLabel">Email</label></br>
             <input 
                type="text" 
                placeholder="johndoe@email.com" 
                id="Email">
            </input>
         </div>
         <div>
            <label id="PhoneNumberLabel">Phone Number</label></br>
             <input 
                type="text" 
                placeholder="(123) 456-7890" 
                id="PhoneNumber">
            </input>
         </div>
         <div>
            <label id="PasswordLabel">Password</label></br>
             <input 
                name="Password"
                id="Password"
                type="password" 
                placeholder="Password"
                onkeyup='passConfirm();'>
            </input>
         </div>
         <div>
            <label id="ConfirmPswdLabel">Confirm Password</label></br>
             <input 
                type="password" 
                placeholder="Confirm Password" 
                id="ConfirmPassword"></input>
         </div>
         <span id="Message"></span>
      
    </form>
      <button type="submit" value="submit">Sign Me Up!</button>
</div>

Answer 1

问题是，您没有在确认密码输入上添加 onKeyUp 事件。它在您添加时起作用。另外，使用 <input /> 而不是 <input></input>.

var passConfirm = function() {
  if (document.getElementById("Password").value ==
    document.getElementById("ConfirmPassword").value) {
    document.getElementById("Message").style.color = "Green";
    document.getElementById("Message").innerHTML = "Passwords match!"
  } else {
    document.getElementById("Message").style.color = "Red";
    document.getElementById("Message").innerHTML = "Passwords do NOT match!"
  }
}

<div class="container">
  <form class="form" onsubmit="validateForm(event)">
    <div>
      <label id="FullNameLabel">Full Name</label></br>
      <input type="text" placeholder="John Doe" id="FullName" />
    </div>
    <div>
      <label id="EmailLabel">Email</label></br>
      <input type="text" placeholder="johndoe@email.com" id="Email" />
    </div>
    <div>
      <label id="PhoneNumberLabel">Phone Number</label></br>
      <input type="text" placeholder="(123) 456-7890" id="PhoneNumber" />
    </div>
    <div>
      <label id="PasswordLabel">Password</label></br>
      <input name="Password" id="Password" type="password" placeholder="Password" onkeyup='passConfirm();' />
    </div>
    <div>
      <label id="ConfirmPswdLabel">Confirm Password</label></br>
      <input type="password" placeholder="Confirm Password" id="ConfirmPassword" onkeyup='passConfirm();' />
    </div>
    <span id="Message"></span>
  </form>
  <button type="submit" value="submit">Sign Me Up!</button>
</div>

Answer 2

您已将 onkeyup 事件处理程序添加到仅 Password 输入。

您应该跟踪两个密码输入的值更改以查看它们是否匹配。

所以将onkeyup='passConfirm();'添加到ConfirmPassword输入将解决问题。

即使密码匹配，确认密码仍显示 "Passwords do not match"

Confirming Password is still displaying "Passwords do not match" even when passwords do match

javascript

forms

passwords