bootstrap 表单验证使用方法

为了详细讲解 Bootstrap 表单验证的使用方法，我们需要从以下几个方面来介绍：

1. 引入 Bootstrap 表单验证相关的文件
2. 理解 Bootstrap 表单验证的基本结构
3. 使用 Bootstrap 表单验证的相关属性和方法
4. 示例说明

1.引入 Bootstrap 表单验证相关的文件

首先，我们需要引入 Bootstrap 框架及其相关依赖文件，包括jQuery和Popper.js。以及jquery-validation插件（该插件是Bootstrap官方提供的验证插件）。

<!--引入 Bootstrap 的 CSS 文件-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">

<!--引入 jQuery、Popper.js 和 Bootstrap 的 JS 文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<!--引入 jquery-validation 插件-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

2. 理解 Bootstrap 表单验证的基本结构

在 HTML 代码中，我们需要为表单元素添加相应的验证属性，比如 required ，min ， max ， email 等等。

<form>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" name="name" placeholder="请输入您的姓名" required>
    <div class="invalid-feedback"></div>
  </div>

  <div class="form-group">
    <label for="age">年龄</label>
    <input type="number" class="form-control" id="age" name="age" min="18" max="60" placeholder="请输入您的年龄" required>
    <div class="invalid-feedback"></div>
  </div>

  <div class="form-group">
    <label for="email">电子邮件</label>
    <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的电子邮件" required>
    <div class="invalid-feedback"></div>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

在上述 HTML 代码中，我们使用了 form-group 和 form-control 类来设置表单的布局，同时为每个表单元素添加了相应的验证属性，同时使用 invalid-feedback 类来显示验证失败的提示信息。

3. 使用 Bootstrap 表单验证的相关属性和方法

我们可以通过以下属性来设置和使用 Bootstrap 表单验证：

• data-toggle="validator"：在 form 元素上添加该属性来启用 Bootstrap 表单验证。
• data-required-error-message="xxx"：在需要验证的表单元素上添加该属性来指定验证失败时需要显示的提示信息。
• data-minlength="x" 或 minlength="x"：指定文本输入框的最小长度。
• data-maxlength="x" 或 maxlength="x"：指定文本输入框的最大长度。
• pattern="xxx"：使用正则表达式来限制输入内容格式。
• data-match="#inputID"：指定与另一个输入框的值相同。

同时，Bootstrap 表单验证还提供了一些方法，可以通过以下方法来调用：

• validate()：调用该方法来手动验证表单。
• resetForm()：调用该方法来重置表单。

4. 示例说明

由于篇幅限制，我只展示两个比较基础的 Bootstrap 表单验证的示例。

示例一：验证必填项和邮箱格式

<form data-toggle="validator">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" name="name" placeholder="请输入您的姓名" required>
    <div class="invalid-feedback"></div>
  </div>

  <div class="form-group">
    <label for="email">电子邮件</label>
    <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的电子邮件" required data-required-error-message="电子邮件不能为空！" data-error="请填写正确的电子邮件地址">
    <div class="invalid-feedback"></div>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

在这个示例中，我们为姓名和邮箱两个输入框添加了必填选项，并使用了 data-required-error-message 属性来指定错误时显示的提示信息。

示例二：验证两个密码输入框是否相同

<form data-toggle="validator">
  <div class="form-group">
    <label for="password1">密码</label>
    <input type="password" class="form-control" id="password1" name="password1" placeholder="请输入密码" required>
    <div class="invalid-feedback"></div>
  </div>

  <div class="form-group">
    <label for="password2">确认密码</label>
    <input type="password" class="form-control" id="password2" name="password2" placeholder="请再次输入密码" required data-match="#password1" data-match-error="两次输入的密码不一致">
    <div class="invalid-feedback"></div>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

在这个示例中，我们使用了 data-match 和 data-match-error 属性来指定确认密码输入框必须与密码输入框的值相等，否则将显示错误提示信息。