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

Question

您好，我需要一些帮助，我确定这个主题之前已经回答过了，但是我尝试使用一些参考资料，来自如何在不重新加载页面的情况下检查表单中的确认密码字段无需单击提交按钮或重新加载页面即可匹配我的代码在下面不起作用的地方，我想寻求一些帮助，因为我如何显示它当然我不只是使用我正在使用的普通表单

<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="^(?=.*[az])(?=.*[AZ])(?=.*[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在每次按键时检查密码。

所以代替 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="^(?=.*[az])(?=.*[AZ])(?=.*[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 2

使用内联事件处理程序（ <div onclick="..."> ）通常不是一个好主意。

这是一个最小的可重现示例。 它对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>

Answer 3

您必须使用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="^(?=.*[az])(?=.*[AZ])(?=.*[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>