通过Bootstrap 5.2验证文档中的此消息，
https://getbootstrap.com/docs/5.2/forms/validation/
"我们知道，目前客户端自定义验证样式和工具提示是不可访问的，因为它们没有暴露在辅助技术中。当我们研究解决方案时，我们建议使用服务器端选项或默认的浏览器验证方法&"；，
我正在寻找另一种用红色边框设计无效输入字段样式的方法。所以我尝试了HTML5方法，但无法显示红色边框。我曾经使用Bootstrap 3.3.7轻松地完成这项工作，但由于某种原因，几年后，我似乎无法使用Bootstrap5.2(或在没有任何框架的情况下(。
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Favorite fruit with required attribute</title>
<style>
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
input:invalid:required {
background-color: #d2d2d2;
}
</style>
</head>
<body>
<form>
<div>
<label for="choose1">What is your favorite color?</label>
<input id="choose1" required>
</div>
<div>
<label for="choose2">What is your favorite breakfast food?</label>
<input id="choose2" required>
</div>
<button>Submit</button>
</form>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Favorite fruit with required attribute</title>
<style>
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
input:invalid:required {
background-color: #d2d2d2;
}
</style>
</head>
<body>
<form>
<div>
<label for="choose1">What is your favorite color?</label>
<input id="choose1" required>
</div>
<div>
<label for="choose2">What is your favorite breakfast food?</label>
<input id="choose2" required>
</div>
<button>Submit</button>
</form>
</body>
</html>试试这个，它是Javascript。如果您不需要从form发送任何内容，请从按钮中删除type="submit"，并在addEventListener中更改"；提交"；至"；点击"；。
//When the DOM is loaded, apply this
window.addEventListener('DOMContentLoaded', () => {
//Get the form ID
const form = document.getElementById("formm");
//on submit form, check if valid
form.addEventListener("submit", (e)=>{
if (form.checkValidity() === false) {
e.preventDefault();
e.stopPropagation();
}
form.classList.add("was-validated");
})
});<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Favorite fruit with required attribute</title>
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<!--add an ID and "novalidate" to disable the alert from browser-->
<form id="formm" novalidate>
<div>
<label for="choose1">What is your favorite color?</label>
<input class="form-control" id="choose1" required>
</div>
<div>
<label for="choose2">What is your favorite breakfast food?</label>
<input class="form-control" id="choose2" required>
</div>
<!--add button type to submit-->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!--Just Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>