Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

讲解BootstrapValidator校验、校验清除重置的实现代码需要以下步骤：

1. 引入BootstrapValidator插件库

在HTML文档中，需要先引入BootstrapValidator的插件库，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

其中，第一行引入的是Bootstrap的CSS样式表文件。第二行引入的是BootstrapValidator的CSS样式表文件。第三行引入的是Bootstrap的JS脚本文件。第四行引入的是BootstrapValidator的JS脚本文件。

2. 编写HTML表单

在HTML文档中，需要编写需要验证的表单，如下所示：

<form id="myForm">
  <div class="form-group">
    <label>用户名：</label>
    <input type="text" class="form-control" name="username" required>
  </div>
  <div class="form-group">
    <label>密码：</label>
    <input type="password" class="form-control" name="password" required>
  </div>
  <button type="button" class="btn btn-primary" id="validateBtn">校验</button>
  <button type="button" class="btn btn-secondary" id="resetBtn">重置</button>
  <button type="button" class="btn btn-secondary" id="clearBtn">清除</button>
</form>

以上代码片段中的表单包含两个文本框和三个按钮，通过name属性可以定义需要验证的表单项。

3. 编写校验规则

在JS脚本中，需要编写校验规则，如下所示：

$(function() {
  $("#myForm").bootstrapValidator({
    message: '该值无效',
    fields: {
      username: {
        message: '用户名无效',
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          stringLength: {
            min: 3,
            max: 10,
            message: '用户名长度必须在3到10个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含大小写字母、数字和下划线'
          }
        }
      },
      password: {
        message: '密码无效',
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          stringLength: {
            min: 6,
            max: 30,
            message: '密码长度必须在6到30个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_@#$%]+$/,
            message: '密码只能包含大小写字母、数字和@#$%特殊字符'
          }
        }
      }
    }
  });
});

以上代码片段中，通过$(function() {})定义了当DOM ready的时候执行的函数。这个函数内部，$("#myForm")表示选中ID为myForm的表单，通过bootstrapValidator({})方法设置了该表单需要遵循的校验规则。在fields属性中，需要设置每个表单项的校验规则。

4. 添加校验、清除和重置事件

在JS脚本中，我们需要添加校验、清除和重置事件，如下所示：

$(function() {
  $("#myForm").bootstrapValidator({
    message: '该值无效',
    fields: {
      username: {
        message: '用户名无效',
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          stringLength: {
            min: 3,
            max: 10,
            message: '用户名长度必须在3到10个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含大小写字母、数字和下划线'
          }
        }
      },
      password: {
        message: '密码无效',
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          stringLength: {
            min: 6,
            max: 30,
            message: '密码长度必须在6到30个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_@#$%]+$/,
            message: '密码只能包含大小写字母、数字和@#$%特殊字符'
          }
        }
      }
    }
  });

  $("#validateBtn").click(function() {
    $("#myForm").bootstrapValidator('validate');
  });

  $("#resetBtn").click(function() {
    $("#myForm").data('bootstrapValidator').resetForm(true);
  });

  $("#clearBtn").click(function() {
    $("#myForm")[0].reset();
  });
});

以上代码片段中，通过$("#validateBtn").click()来绑定校验按钮的点击事件。这样点击校验按钮时，就会自动调用$("#myForm").bootstrapValidator('validate')来进行校验。

通过$("#resetBtn").click()来绑定重置按钮的点击事件。这样点击重置按钮时，就会自动调用$("#myForm").data('bootstrapValidator').resetForm(true)来重置表单。

通过$("#clearBtn").click()来绑定清除按钮的点击事件。这样点击清除按钮时，就会自动调用$("#myForm")[0].reset()来清除表单中的内容。

以上就是BootstrapValidator校验、校验清除和重置的实现方式。下面给出两个简单的示例：

示例一：必填项校验

HTML代码：

<form id="myForm">
  <div class="form-group">
    <label>姓名：</label>
    <input type="text" class="form-control" name="name" required>
  </div>
  <div class="form-group">
    <label>年龄：</label>
    <input type="number" class="form-control" name="age" required>
  </div>
  <button type="button" class="btn btn-primary" id="validateBtn">校验</button>
  <button type="button" class="btn btn-secondary" id="resetBtn">重置</button>
  <button type="button" class="btn btn-secondary" id="clearBtn">清除</button>
</form>

JS代码：

$(function() {
  $("#myForm").bootstrapValidator({
    message: '该值无效',
    fields: {
      name: {
        message: '姓名无效',
        validators: {
          notEmpty: {
            message: '姓名不能为空'
          }
        }
      },
      age: {
        message: '年龄无效',
        validators: {
          notEmpty: {
            message: '年龄不能为空'
          }
        }
      }
    }
  });

  $("#validateBtn").click(function() {
    $("#myForm").bootstrapValidator('validate');
  });

  $("#resetBtn").click(function() {
    $("#myForm").data('bootstrapValidator').resetForm(true);
  });

  $("#clearBtn").click(function() {
    $("#myForm")[0].reset();
  });
});

示例二：手机号码校验