<think>
我们正在讨论
Bootstrap输入框
必填校验的实现方法。根据提供的引用，我们看到了一些自定义校验函数的例子（如端口验证），以及一个直接在
HTML中使用onkeyup事件进行
输入限制的例子。但是，对于
必填校验，
Bootstrap本身并没有内置的验证方法，但我们可以结合
HTML5的验证属性和
Bootstrap的样式，或者使用JavaScript（如
jQuery）来实现。
通常，在
Bootstrap中实现
表单验证，我们可以：
1. 使用
HTML5的`required`属性来实现简单的
必填校验，并利用
Bootstrap的样式来展示验证状态。
2. 使用JavaScript（例如
jQuery）来增强验证，比如在
表单提交时检查
输入框是否为空，并应用
Bootstrap的样式（如`.is-invalid`和`.is-valid`）来显示验证结果。
下面是一个简单的例子，展示如何使用
HTML5的required属性和
Bootstrap的样式：
```
html
<form>
<div class="form-group">
<label for="requiredInput">
必填字段</label>
<input type="text" class="form-control" id="requiredInput" required>
<div class="invalid-feedback">
请
输入内容。
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
```
但是，上述代码需要配合JavaScript来显示自定义的验证消息，因为浏览器默认的验证气泡可能无法与
Bootstrap样式协调。我们可以通过监听
表单的提交事件来阻止默认行为，然后应用
Bootstrap的验证样式：
```
html
<script>
// 当文档加载完成
document.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
event.stopPropagation();
// 检查
表单有效性
if (form.checkValidity() === false) {
// 如果
表单无效，为每个无效元素
添加样式
form.classList.add('was-validated');
} else {
//
表单有效，可以提交
// 这里可以
添加表单提交的代码
console.log('
表单验证通过');
}
}, false);
});
</script>
```
另外，我们也可以使用
jQuery来实现，特别是当
项目已经使用了
jQuery时。下面是一个使用
jQuery的例子：
```
html
<form id="myForm">
<div class="form-group">
<label for="requiredInput">
必填字段</label>
<input type="text" class="form-control" id="requiredInput" required>
<div class="invalid-feedback">
请
输入内容。
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script src="https://code.
jquery.com/
jquery-3.5.1.slim.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').on('submit', function(e) {
e.preventDefault();
// 检查
必填字段
var input = $('#requiredInput');
if (input.val().trim() === '') {
input.addClass('is-invalid');
} else {
input.removeClass('is-invalid');
// 这里可以提交
表单
console.log('
表单验证通过');
}
});
});
</script>
```
注意：上面的
jQuery例子中，我们只验证了一个字段，实际应用时可能需要遍历所有
必填字段。
另外，引用[1]中提供了一个自定义校验函数的例子（端口校验），我们可以借鉴其思路来编写
必填校验函数，但注意它使用了setTimeout，这可能是因为在异步验证的场景（比如与服务器交互）下，但
必填校验通常是同步的。
总结：
Bootstrap输入框
必填校验可以通过以下步骤实现：
1. 在
输入框上
添加`required`属性（
HTML5原生支持）。
2. 使用JavaScript监听
表单提交事件，阻止默认提交行为。
3. 检查每个
必填字段的值，如果为空，则
添加`is-invalid`类（
Bootstrap提供），并显示错误信息；如果有效，则移除`is-invalid`类（或
添加`is-valid`类）。
4. 在
表单上
添加`was-validated`类（
Bootstrap提供），以便显示验证状态（当使用原生
HTML5验证时）。
最后，根据用户的需求，我们生成了相关问题：
§§相关问题§§
1. 如何自定义
Bootstrap表单验证的错误提示信息？
2. 除了
必填校验，
Bootstrap还支持哪些类型的
表单验证？
3. 如何使用
Bootstrap实现异步
表单验证（例如检查用户名是否已存在）？
</think>
以下是
Bootstrap 输入框
必填校验的实现方法，结合
HTML5
表单验证特性和
Bootstrap 验证样式：
### 基础实现方案（
HTML5 +
Bootstrap）
```
html
<form class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label">用户名*</label>
<input type="text" class="form-control" required>
<div class="invalid-feedback">用户名不能为空</div>
</div>
<button class="btn btn-primary" type="submit">提交</button>
</form>
<script>
//
表单验证逻辑
document.querySelector('form').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
this.classList.add('was-validated')
})
</script>
```
### 关键实现要素：
1. **
HTML5 属性**
- `required` 属性标记
必填字段
- `novalidate` 禁用浏览器默认验证
2. **
Bootstrap 样式类**
- `.needs-validation`：初始
表单容器
- `.was-validated`：验证触发后
添加的类（动态
添加）
- `.invalid-feedback`：验证失败的提示信息
3. **验证逻辑**
-
表单提交时触发 `checkValidity()` 原生验证
- 通过
添加 `.was-validated` 类显示验证状态
- 使用 `preventDefault()` 阻止无效
表单提交
### 进阶校验示例（自定义规则）
```javascript
// 自定义验证方法
function validateRequired(input) {
if (!input.value.trim()) {
input.setCustomValidity('字段不能为空');
input.classList.add('is-invalid');
return false;
}
input.setCustomValidity('');
input.classList.remove('is-invalid');
return true;
}
// 绑定实时校验
document.querySelectorAll('[required]').forEach(input => {
input.addEventListener('input', () => {
validateRequired(input);
});
});
```
### 注意事
项：
1. 移动端适配：
Bootstrap 的响应式设计自动适配移动设备
2. 样式覆盖：可通过
CSS 自定义验证提示样式
```
css
.invalid-feedback {
color: #dc3545;
font-size: 0.875em;
}
```
3. 组合验证：可结合正则表达式实现复杂校验（参考引用[1]的端口验证逻辑）
[^1]: 验证逻辑参考了端口校验的实现思路，将
必填检测与格式校验分离处理
[^2]: 前端
输入限制方法可结合 `oninput` 事件实现实时过滤
BootStrap表单红星标注
本文介绍如何在BootStrap3.0中为表单的必填项添加红星标注，通过简单的CSS伪元素实现美观且实用的效果。
扫一扫
9849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
