Bootstrap 5 表单验证详解
小白也能懂的 Bootstrap 5 表单验证知识点汇总
什么是表单验证？
表单验证就是检查用户在表单中输入的内容是否符合要求。比如：
- 邮箱格式是否正确
- 密码是否达到安全要求
- 必填项是否填写了内容
- 手机号是否符合格式
Bootstrap 5 让表单验证变得非常简单，只需要添加一些CSS类就能搞定！
核心知识点
验证状态样式
Bootstrap 使用特殊的CSS类来控制验证状态的显示：
- .is-valid – 验证通过时的样式（绿色边框）
- .is-invalid – 验证失败时的样式（红色边框）
验证提示信息
需要搭配以下类来显示提示信息：
- .valid-feedback – 验证通过时显示的提示信息（绿色）
- .invalid-feedback – 验证失败时显示的提示信息（红色）
.was-validated 类
这个类通常加在 <form> 元素上，当用户尝试提交表单时添加，用来显示所有验证状态
HTML5 验证属性
Bootstrap 5 配合标准的HTML5验证属性使用：
- required – 必填字段
- pattern – 正则表达式验证
- min/max – 最小值/最大值
- minlength/maxlength – 最小/最大长度
小贴士： Bootstrap 5 不再依赖 jQuery，使用原生JavaScript实现验证功能，性能更好！
实战示例
代码解析:
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="username" class="form-label">用户名</label>
// 添加 required 属性表示必填
// minlength="3" 设置最小长度
<input type="text" class="form-control" id="username" required minlength="3">
// 验证失败时显示的信息
<div class="invalid-feedback">
用户名至少需要3个字符！
</div>
// 验证成功时显示的信息（可选）
<div class="valid-feedback">
用户名可用！
</div>
</div>
// 提交按钮
<button type="submit" class="btn btn-primary">提交表单</button>
</form>
注意事项：
- 必须在
<form>上添加novalidate属性禁用浏览器默认验证 - 使用
needs-validation类初始化表单验证 - 验证提示信息必须放在输入框之后
常用验证类型
-
必填验证
添加 required 属性
例如：用户名、邮箱等必须填写的字段 -
长度验证
使用 minlength 和 maxlength 属性
例如：密码至少6位，用户名最多20位 -
格式验证
使用 type=”email” 或 type=”url”
自动验证邮箱、网址格式 -
数值范围验证
使用 min 和 max 属性
例如：年龄在18-100岁之间 -
自定义模式验证
使用 pattern 属性配合正则表达式
例如：手机号验证、身份证号验证
高级技巧
自定义验证
使用JavaScript进行自定义验证逻辑：
// 获取表单元素
const form = document.getElementById('myForm');
// 自定义验证函数
function validatePassword() {
const password = document.getElementById('password');
if (password.value.length < 8) {
password.setCustomValidity('密码至少需要8个字符');
} else {
password.setCustomValidity('');
}
}
// 表单提交事件
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
// 添加was-validated类显示验证结果
form.classList.add('was-validated');
});
服务端验证：
Bootstrap 也可以显示服务端返回的验证结果：
<input class="form-control is-invalid">
<div class="invalid-feedback">
服务器返回的错误信息
</div>最佳实践
- 优先使用HTML5内置验证属性
- 为每个输入框提供清晰明确的错误提示
- 必填项使用星号(*)标记
- 在用户提交表单时统一显示所有错误
- 实时验证可以提升用户体验
- 重要表单添加服务端验证作为双重保障
- 移动端注意错误提示的显示位置