bootstrap表单验证

Bootstrap是一个流行的前端框架，它简化了HTML、CSS和JavaScript的开发过程。在Bootstrap中，表单验证通常是通过JavaScript插件Bootstrap Form Validation来实现的。这个插件允许开发者轻松地添加各种类型的客户端验证，如必填字段验证、邮箱地址验证、数字范围验证等。

以下是使用Bootstrap表单验证的基本步骤：

1. 引入Bootstrap和插件：首先，在HTML头部引入Bootstrap CSS和JS文件，以及Form Validation的相关JS文件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.0/dist/sweetalert2.min.js"></script> <!-- 使用SweetAlert2进行更友好的提示 -->

2. 添加`data-validation`属性：给需要验证的表单元素添加相应的数据属性，例如`required`表示该字段不能为空。

<form class="form-validation" novalidate>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" class="form-control" data-required="true">
    </div>
    <!-- 更多输入框... -->
</form>

3. 初始化验证：在JavaScript中，通常使用jQuery或其他库来初始化插件。

$(document).ready(function () {
    $('.form-validation').bootstrapValidator({
        fields: {
            email: {
                validators: {
                    notEmpty: {
                        message: '请输入有效的电子邮件地址'
                    },
                    emailAddress: {}
                }
            }
        // 其他字段配置...
        });
});