使用 Bootstrap 进行 HTML 表单验证

HTML 表单是网站中必不可少的元素。大多数网站的网页上至少有一个表单部分。始终建议在提交表单数据之前验证用户的输入。HTML5 表单验证有助于确保服务器端数据提交的安全。有两种类型的验证：客户端和服务器端。客户端验证是一种用户友好的方法，无需后端服务器交互即可验证 HTML 表单。

浏览器默认验证方法可以与输入元素中的必需属性一起使用。如果您想显示自定义验证反馈消息，请使用 JavaScript 更改表单行为。

在此示例代码片段中，我们将使用 Bootstrap 创建 HTML 表单，并使用 JavaScript 集成自定义验证消息。

引导库：
自定义表单和验证反馈样式只需要 Bootstrap CSS 库。

使用以下代码包含 Bootstrap 编译的 CSS。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

HTML 表单：
对于 Bootstrap 自定义表单验证，请使用<form>元素novalidate中的属性。它将禁用浏览器默认的验证反馈工具提示。

.form-controlBootstrap类提供自定义反馈样式.form-select。
以下 HTML 代码将创建一个包含常用输入元素的表单，并使用 Bootstrap 添加自定义验证反馈消息。

<form class="row g-3 frm-validation" novalidate>
<div class="col-md-6">
<label for="first_name" class="form-label">First name</label>
<input type="text" class="form-control" id="first_name" required>
<div class="invalid-feedback">
Please enter your first name.
</div>
</div>
<div class="col-md-6">
<label for="last_name" class="form-label">Last name</label>
<input type="text" class="form-control" id="last_name" required>
<div class="invalid-feedback">
Please enter your last name.
</div>
</div>
<div class="col-md-12">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">
Please enter your email.
</div>
</div>
<div class="col-md-6">
<label for="username" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required>
<div class="invalid-feedback">
Please enter your last name.
</div>
</div>
<div class="col-md-6">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-6">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-6">
<label for="zipcode" class="form-label">Zipcode</label>
<input type="text" class="form-control" id="zipcode" required>
<div class="invalid-feedback">
Please provide a valid zipcode.
</div>
</div>
<div class="col-md-6">
<label for="country" class="form-label">Country</label>
<input type="text" class="form-control" id="country" required>
<div class="invalid-feedback">
Please provide a valid country.
</div>
</div>
<div class="col-md-12">
<label for="bio" class="form-label">Bio</label>
<textarea class="form-control" id="bio" placeholder="Bio info here..." required></textarea>
<div class="invalid-feedback">
Please enter some text about yourself.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>

JavaScript 代码：

尽管我们已经禁用了浏览器默认验证，但仍然可以在 JavaScript 中访问表单验证 API。

以下 JavaScript 将拦截表单提交按钮并向用户显示验证反馈。

(() => {
'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.frm-validation')

// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}

form.classList.add('was-validated')
}, false)
})
})()