Bootstrap 表单验证
🎯 概述
Bootstrap 表单验证提供了客户端验证样式和反馈，帮助用户正确填写表单。
📦 基本用法
html
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01" class="form-label">名字</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="valid-feedback">
看起来不错！
</div>
<div class="invalid-feedback">
请提供有效的名字。
</div>
</div>
<button class="btn btn-primary" type="submit">提交表单</button>
</form>
<script>
// 表单验证
(function() {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>✅ 验证状态
html
<!-- 有效状态 -->
<div class="mb-3">
<label for="validInput" class="form-label">有效输入</label>
<input type="text" class="form-control is-valid" id="validInput" value="正确的值">
<div class="valid-feedback">
输入正确！
</div>
</div>
<!-- 无效状态 -->
<div class="mb-3">
<label for="invalidInput" class="form-label">无效输入</label>
<input type="text" class="form-control is-invalid" id="invalidInput">
<div class="invalid-feedback">
请提供有效的输入。
</div>
</div>🌟 实际示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 表单验证示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h1>Bootstrap 表单验证示例</h1>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">名字</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">看起来不错！</div>
<div class="invalid-feedback">请提供名字。</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">姓氏</label>
<input type="text" class="form-control" id="lastName" required>
<div class="valid-feedback">看起来不错！</div>
<div class="invalid-feedback">请提供姓氏。</div>
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">邮箱</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">请提供有效的邮箱地址。</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" minlength="8" required>
<div class="invalid-feedback">密码至少需要 8 个字符。</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree" required>
<label class="form-check-label" for="agree">
同意条款和条件
</label>
<div class="invalid-feedback">您必须同意才能提交。</div>
</div>
</div>
<button class="btn btn-primary" type="submit">提交表单</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function() {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
</body>
</html>下一步
恭喜！你已经完成了 Bootstrap 教程的学习。