Bootstrap - 验证：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入Bootstrap验证的世界。作为你友好的计算机老师邻居，我很高兴引导你们开始这段旅程。如果你是编程新手，不用担心——我们将从基础开始，逐步深入。在本教程结束时，你将能够像专业人士一样验证表单！

什么是Bootstrap验证？

在我们深入了解细节之前，让我们先了解一下Bootstrap验证是什么。想象一下，你正在在线填写一个表单，不小心留下了一个必填字段空白。突然，表单用红色突出显示该字段，告诉你需要填写它。这就是表单验证的作用！我们的可靠前端工具包Bootstrap为我们提供了内置的验证功能，使这个过程顺利且用户友好。

自定义样式

让我们从表单验证的自定义样式开始。Bootstrap允许我们为验证过程添加自己的风格。以下是一个简单的例子：

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
请选择一个用户名。
</div>
</div>
<button class="btn btn-primary" type="submit">提交表单</button>
</form>

在这个例子中，我们为我们的表单添加了needs-validation类，并设置了novalidate以防止默认的浏览器验证。输入字段上的required属性告诉Bootstrap这个字段必须填写。

现在，让我们添加一些JavaScript来使其工作：

(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

这段JavaScript代码为我们的表单添加了事件监听器，当表单被提交时检查有效性。如果表单无效，它将阻止提交并添加was-validated类，这会触发我们的自定义样式。

浏览器默认样式

有时，你可能想要使用浏览器的默认验证样式。这就像让浏览器为你做重活！以下是如何操作的：

<form>
<div class="form-group">
<label for="email">电子邮件地址</label>
<input type="email" class="form-control" id="email" required>
</div>
<button class="btn btn-primary" type="submit">提交</button>
</form>

在这种情况下，我们移除了needs-validation类和novalidate属性。浏览器现在将使用其默认样式处理验证。

服务器端验证

虽然客户端验证对用户体验很好，但我们应该始终实现服务器端验证以确保安全。以下是一个简单的PHP例子：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "无效的电子邮件格式";
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

这段PHP代码检查提交的电子邮件是否有效。请记住：永远不要信任用户的输入！

支持的元素

Bootstrap验证支持多种表单元素。让我们看看几个：

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="country">国家</label>
<select class="form-control" id="country" required>
<option value="">选择...</option>
<option>美国</option>
<option>英国</option>
<option>加拿大</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
同意条款和条件
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">提交表单</button>
</form>

这个表单包括文本输入、密码输入、下拉选择和复选框 - 所有这些都由Bootstrap验证支持。

工具提示

想要为你的验证消息添加一些额外的魅力吗？试试工具提示！以下是如何操作的：

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-tooltip">
请选择一个唯一的用户名。
</div>
</div>
<button class="btn btn-primary" type="submit">提交表单</button>
</form>

我们将invalid-feedback替换为invalid-tooltip。现在，你将看到的是一个时尚的工具提示，而不是输入下方的文本！

验证方法

以下是一些常见的验证方法，你可以使用：

方法	描述
required	字段不能为空
minlength	字符的最小长度
maxlength	字符的最大长度
min	数值输入的最小值
max	数值输入的最大值
type="email"	必须是有效的电子邮件地址
pattern	必须匹配特定的模式

记住，你可以组合这些方法以实现更复杂的验证规则！

就这样，伙计们！我们已经涵盖了Bootstrap验证的基础，从自定义样式到工具提示。记住，熟能生巧，所以不要害怕尝试这些概念。快乐编码，愿你的表单永远被验证！

Credits: Image by storyset