在下面的代码中，当数据保存在浏览器中时，引导程序验证（绿色勾号）不会显示，但当手动输入数据时，它可以正常工作。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags and Bootstrap CSS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration Form</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional: Adjust form width on larger screens */
.registration-form {
max-width: 500px;
margin: auto;
}
/* Remove autofill background color in Chrome */
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important; /* Changes background to white */
-webkit-text-fill-color: #000 !important; /* Ensures text remains black */
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="registration-form">
<div class="card">
<div class="card-body">
<h3 class="card-title text-center mb-4">Register</h3>
<form class="needs-validation" novalidate>
<!-- First Name and Last Name -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" pattern="^[A-Za-z]+$" placeholder="First Name" required>
<div class="invalid-feedback">
Please enter your first name (letters only).
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" pattern="^[A-Za-z]+$" placeholder="Last Name" required>
<div class="invalid-feedback">
Please enter your last name (letters only).
</div>
</div>
</div>
<!-- Email -->
<div class="mb-3">
<label for="emailAddress" class="form-label">Email</label>
<input type="email" class="form-control" id="emailAddress" placeholder="Email" required>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<!-- Password -->
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" minlength="6" placeholder="Password" required>
<div class="invalid-feedback">
Please enter a password with at least 6 characters.
</div>
</div>
<!-- Confirm Password -->
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" minlength="6" placeholder="Confirm Password" required>
<div class="invalid-feedback">
Passwords do not match.
</div>
</div>
<!-- Terms and Conditions -->
<div class="form-check mb-3">
<input type="checkbox" id="terms" class="form-check-input" required>
<label class="form-check-label" for="terms">I agree to the terms and conditions</label>
<div class="invalid-feedback">
You must agree to the terms and conditions.
</div>
</div>
<!-- Submit Button -->
<div class="d-grid">
<button class="btn btn-primary" type="submit">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and custom validation script -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Trigger validation for autofilled fields on page load
const triggerAutofillValidation = () => {
const autofillFields = document.querySelectorAll('input:-webkit-autofill');
// Dispatch an input event for each autofilled field to trigger validation
autofillFields.forEach(field => {
field.dispatchEvent(new Event('input', { bubbles: true }));
});
};
// On window load, trigger autofill validation
window.addEventListener('load', triggerAutofillValidation);
// Loop over each form and prevent submission if invalid
Array.from(forms).forEach(form => {
// Password and Confirm Password fields
const password = form.querySelector('#password');
const confirmPassword = form.querySelector('#confirmPassword');
// Event listener to validate password match
confirmPassword.addEventListener('input', function () {
if (confirmPassword.value !== password.value) {
confirmPassword.setCustomValidity('Passwords do not match');
} else {
confirmPassword.setCustomValidity('');
}
});
// Form submission event
form.addEventListener('submit', event => {
// Check for validity
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
// Add Bootstrap validation classes
form.classList.add('was-validated');
}, false);
});
})();
</script>
</body>
</html>
请参阅以下图片以供参考
当浏览器保存的数据也被使用时，我要得到什么标记。
另一位用户在 Github 上讨论了这个问题：https://github.com/twbs/bootstrap/issues/39530
根据我的搜索，我找到了这个链接：https://devcodef1.com/news/1402208/bootstrap-form-validation-issue（我建议不要打开....由于有很多通知它包含！）
以下是上述网站上所写内容的摘要：
此错误涉及 Bootstrap 的内置验证样式，该样式会干扰浏览器恢复表单字段中保存的数据的能力。我的意思是，当
.was-validated<form>您可以在代码中尝试使用 JavaScript 从
.was-validated<form>