您好，我需要一些幫助，我確定這個主題之前已經回答過，但我嘗試使用一些參考資料，來自如何檢查表單中的確認密碼欄位而不重新加載頁面 我希望密碼和確認密碼將顯示錯誤，如果密碼不無需單擊提交按鈕或重新加載頁面即可匹配我的代碼在下面不起作用的地方，我想尋求一些幫助，因為我如何顯示它當然我不只是使用我正在使用的普通表單
<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;" >
Enter a password!
</div> -->
<!--<div id="passwordvalidator" >
Password must meet the following requirements:
<br><br>
<label > At least one capital letter</label>
<br>
<label > At least one special character</label>
<br>
<label > At least one number</label>
<br>
<label > 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> 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>uj5u.com熱心網友回復：
您必須使用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>uj5u.com熱心網友回復：
您可以使用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;" >
Enter a password!
</div> -->
<!--<div id="passwordvalidator" >
Password must meet the following requirements:
<br><br>
<label > At least one capital letter</label>
<br>
<label > At least one special character</label>
<br>
<label > At least one number</label>
<br>
<label > 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> 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>uj5u.com熱心網友回復：
它一般是不是一個好主意使用行內事件處理程式（<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/407966.html
標籤：
上一篇：僅檢查未禁用