即使密码匹配，确认密码仍显示“密码不匹配”答案

【问题标题】：Confirming Password is still displaying "Passwords do not match" even when passwords do match即使密码匹配，确认密码仍显示“密码不匹配”
【发布时间】：2021-04-04 22:11:20
【问题描述】：

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

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

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

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

有人知道为什么会这样吗？

  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>

【问题讨论】：

发生这种情况是因为您在密码输入时调用密码确认功能。在确认密码输入时调用该函数，onkeyup。

标签： javascript forms passwords

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

问题是，您没有在确认密码输入时添加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>

【讨论】：