如何在不重新加载页面或单击按钮的情况下检查表单中的确认密码字段？

Question

您好，我需要一些帮助，我确定这个话题之前已经回答过了，但我尝试使用来自 how to check confirm password field in form without reloading page 的一些参考资料 我希望密码和确认密码会在密码不匹配时显示错误，而无需单击提交按钮或重新加载页面我的代码在下面不起作用的地方，我想寻求帮助显示它当然我不只是使用我正在使用的普通形式

<form class="needs-validation" novalidate>

这是我下面的代码

function onChange() {
  const password = document.querySelector('input[name=validationpassword]');
  const confirm = document.querySelector('input[name=validationconfirmpassword]');
  if (confirm.value === password.value) {
    confirm.setCustomValidity('');
  } else {
    confirm.setCustomValidity('Passwords do not match');
  }
}

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
    <div class="col-6 d-flex">
      <input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" required>
      <i class="bi bi-eye-slash" id="togglePassword"></i>
      <!-- <div style="margin-left: 15px;" class="invalid-tooltip password-empty" >
                                    Enter a password!
                                </div> -->
      <!--<div id="passwordvalidator" class="invalid-tooltip password-notmeet">
      Password must meet the following requirements:
      <br><br>
      <label class="color-text"> At least one capital letter</label>
      <br>
      <label class="color-text"> At least one special character</label>
      <br>
      <label class="color-text"> At least one number</label>
      <br>
      <label class="color-text"> Be at least 7 letter</label>
    </div>
  </div>
</div> -->

      <div class="form-group row">
        <label for="validationconfirmpassword" class="col-form-label passwordadduser">*Re-enter<br>&#10;Password:</label>
        <div class="col-6 d-flex">
          <input name="validationconfirmpassword" onChange="onChange()" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password" required>
          <i class="bi bi-eye-slash" id="toggleconfirmPassword"></i>

        </div>
      </div>
</form>

Answer 1

您必须使用onkeyup() 事件来检查密码。

下面是例子：

function myFunction() {
  var password = document.querySelector('input[name=validationpassword]').value;
  var confirm = document.querySelector('input[name=validationconfirmpassword]').value;
  
  var matchedOrNot = (confirm == password) ? "Password matched" : "Password not matched"; 

  var color = (matchedOrNot == "Password matched") ? "green" : "red";

  document.getElementById("toggleconfirmPassword").className = color;

  document.getElementById("toggleconfirmPassword").innerHTML = matchedOrNot;
}

.red
{
     margin-top: 5px;
     color: red;
     font-weight: bold;
}
    
.green
{
     margin-top: 5px;
     color: green;
     font-weight: bold;
}

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
    <div class="col-6 d-flex">
      <input name="validationpassword" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" required>
    </div>
  </div>

  <div class="form-group row">
    <label for="validationconfirmpassword" class="col-form-label passwordadduser">*Re-enter Password:</label>
    <div class="col-6 d-flex">
      <input name="validationconfirmpassword" onkeyup="myFunction()" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password" required>
      <br>
      <i class="bi bi-eye-slash" id="toggleconfirmPassword"></i>

    </div>
  </div>
</form>

Answer 2

您可以使用onkeyup在每次按键时检查密码。

所以不用 onChange 甚至使用这个：

onkeyup ="onChange()"

function onChange() {
  const password = document.querySelector('input[name=validationpassword]');
  
  const confirm = document.querySelector('input[name=validationconfirmpassword]');
  console.log(confirm.value === password.value)
  if (confirm.value === password.value) {
    confirm.setCustomValidity('');
  } else {
    confirm.setCustomValidity('Passwords do not match');
  }
}

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
    <div class="col-6 d-flex">
      <input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{7,}$" required>
      <i class="bi bi-eye-slash" id="togglePassword"></i>
      <!-- <div style="margin-left: 15px;" class="invalid-tooltip password-empty" >
                                    Enter a password!
                                </div> -->
      <!--<div id="passwordvalidator" class="invalid-tooltip password-notmeet">
      Password must meet the following requirements:
      <br><br>
      <label class="color-text"> At least one capital letter</label>
      <br>
      <label class="color-text"> At least one special character</label>
      <br>
      <label class="color-text"> At least one number</label>
      <br>
      <label class="color-text"> Be at least 7 letter</label>
    </div>
  </div>
</div> -->

      <div class="form-group row">
        <label for="validationconfirmpassword" class="col-form-label passwordadduser">*Re-enter<br>&#10;Password:</label>
        <div class="col-6 d-flex">
          <input name="validationconfirmpassword" onkeyup ="onChange()" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password" required>
          <i class="bi bi-eye-slash" id="toggleconfirmPassword"></i>

        </div>
      </div>
</form>

Answer 3

一般是not a good idea使用内联事件处理器（<div onclick="...">.

这是minimal reproducable example。它使用keyup 和focusin 事件的处理程序比较值和用户关于结果的消息。为两个密码字段设置了处理。

$(`#confirm_password, #passwords`).on({
  keyup: handleConfirmation,
  focusin: handleConfirmation} );

function handleConfirmation() {
  const pass = $(`#passwords`).val();
  const compare = $(`#confirm_password`).val();
  
  // one of the fields is empty, remove message
  if (!pass.trim() || !compare.trim()) {
     return $(`#toggleconfirmPassword`).html(``)
  }
  
  // otherwise, compare and display result
  const isOk = pass === compare;
  $(`#toggleconfirmPassword`).html(isOk ? ` OK ` : `Passwords are not equal (yet)`);
}

body {
  margin: 2rem;
  font: normal 12px/15px verdana, arial;
}

#toggleconfirmPassword {
  color: red;
  font-weight: bold;
}

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="validationpassword" class="col-form-label passwordadduser">
  *Password:
</label>
<input name="validationpassword" type="password" id="passwords"
    placeholder="Password" required>
<div>
  <label for="validationconfirmpassword">
    *Re-enter password:
  </label>
  <input name="validationconfirmpassword" type="password" 
    id="confirm_password" placeholder="Confirm Password" required>
  <i id="toggleconfirmPassword"></i>
</div>