bootstrapvalidator之API学习教程

首先介绍一下Bootstrap Validator，它是基于Bootstrap的表单验证库，允许您使用JavaScript进行验证表单。在使用Bootstrap Validator时，您可以指定验证规则，并使用内置的错误消息来向用户通知验证错误。

下面是Bootstrap Validator的API学习教程，包含以下几个方面：

1. 引入Bootstrap Validator库文件

在使用Bootstrap Validator之前，需要在HTML文档中引入相应的库文件。可以从Bootstrap Validator的官方网站上下载相应的文件，然后在HTML文档中引入。例如：

<!-- 引入jQuery库文件 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 引入Bootstrap库文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入Bootstrap Validator库文件 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

1. 初始化Bootstrap Validator

在HTML文档中，需要定义一个表单，并在文档加载完成时对Bootstrap Validator进行初始化。例如：

<form id="myForm">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" class="form-control" name="username">
  </div>
  <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" name="password">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$(document).ready(function() {
  $('#myForm').bootstrapValidator();
});
</script>

在上面的代码中，我们为form标签定义了一个ID值为"myForm"的表单，并且在文档加载完成后调用了bootstrapValidator()函数进行初始化。

1. 验证规则配置

在初始化Bootstrap Validator之后，需要配置表单的验证规则。可以使用setFieldValidators或'fields'选项来配置验证规则。

下面代码示例说明了如何使用'fields'选项来配置验证规则：

<form id="myForm">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" class="form-control" name="username">
  </div>
  <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" name="password">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          }
        }
      }
    }
  });
});
</script>

在上面的代码中，我们使用了'fields'选项来配置了"username"和"password"两个表单字段的验证规则，指定了notEmpty验证器，并为之定义了相应的错误提示信息。

另一个示例：

<form id="myForm">
  <div class="form-group">
    <label>电话号码</label>
    <input type="text" class="form-control" name="phone">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    fields: {
      phone: {
        validators: {
          notEmpty: {
            message: '电话号码不能为空'
          },
          regexp: {
            regexp: /^[0-9]{11}$/,
            message: '电话号码必须是11位数字'
          }
        }
      }
    }
  });
});
</script>

在上面的代码中，我们使用了正则表达式验证器"regexp"来验证电话号码，指定了电话号码必须是11位数字。如果验证失败，显示"电话号码必须是11位数字"的错误提示信息。

1. 验证失败时的事件处理

在表单验证失败时，可以使用onError进行事件处理。例如：

<form id="myForm">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" class="form-control" name="username">
  </div>
  <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" name="password">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          }
        }
      }
    }
  }).on('error.form.bv', function(e) {
    console.log('表单验证失败');
  });
});
</script>

在上面的代码中，我们使用了'onError'来进行事件处理，当表单验证失败时，调用一个console.log来输出验证失败的信息。

1. 验证成功时的事件处理

在表单验证成功时，可以使用onSuccess来进行事件处理。例如：

<form id="myForm">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" class="form-control" name="username">
  </div>
  <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" name="password">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
$(document).ready(function() {
  $('#myForm').bootstrapValidator({
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          }
        }
      }
    }
  }).on('success.form.bv', function(e) {
    console.log('表单验证成功');
  });
});
</script>

在上面的代码中，我们使用了'onSuccess'来进行事件处理，当表单验证成功时，调用一个console.log来输出验证成功的信息。

以上是Bootstrap Validator的API学习教程。可以根据具体的需求进行相应的配置，来完成表单的验证，以达到验证用户输入数据的目的。