BootStrap Validator使用注意事项(必看篇)

作为一个前端开发者，你可能会经常使用Bootstrap框架来开发网站。其中，Bootstrap Validator是Bootstrap框架中一个非常有用的jQuery插件，可以用于表单验证。在使用Bootstrap Validator时，需要注意以下事项：

1. 引用依赖文件

在使用Bootstrap Validator之前，请确保已经引用了必要的依赖文件：jQuery、Bootstrap和Bootstrap Validator本身。

<!-- 引入jQuery和Bootstrap文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 引入Bootstrap Validator文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

2. 配置Validator选项

在使用Bootstrap Validator时，需要配置一些选项，包括表单域的规则、错误提示信息等等。

下面是一个简单的示例代码，用于配置一个表单，其中包含一个名称和一个密码输入框，并对它们进行相应的校验：

<form id="myForm">
  <div class="form-group">
    <label for="inputName">名称：</label>
    <input type="text" class="form-control" id="inputName" name="inputName" placeholder="请输入名称" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword">密码：</label>
    <input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="请输入密码" required>
    <div class="help-block with-errors"></div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

$(function() {
  // 给表单元素添加Validator校验
  $("#myForm").bootstrapValidator({
    // 表单域规则
    fields: {
      inputName: {
        // 非空判断
        notEmpty: {
          message: "名称不能为空"
        },
        // 长度限制
        stringLength: {
          min: 2,
          max: 10,
          message: "名称长度必须在2到10个字符之间"
        }
      },
      inputPassword: {
        // 非空判断
        notEmpty: {
          message: "密码不能为空"
        }
      }
    },
    // 指定错误提示信息的容器
    errorElement: "div",
    errorClass: "help-block",
    // 指定错误提示信息的位置
    errorPlacement: function(error, element) {
      error.appendTo(element.parent());
    }
  });
});

在这个示例代码中，我们为名为"inputName"和"inputPassword"的表单域分别配置了校验规则，并指定了错误提示信息的位置。

另外需要注意，Bootstrap Validator插件还提供了很多其他的选项和方法，具体可以参考官方文档。

3. 示例说明

下面是两个示例，一个是邮箱验证，一个是日期验证：

3.1 邮箱验证

<form id="myForm">
  <div class="form-group">
    <label for="inputEmail">邮箱：</label>
    <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="请输入邮箱" required>
    <div class="help-block with-errors"></div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

$(function() {
  $("#myForm").bootstrapValidator({
    fields: {
      inputEmail: {
        notEmpty: {
          message: "邮箱不能为空"
        },
        emailAddress: {
          message: "邮箱格式不正确"
        }
      }
    },
    errorElement: "div",
    errorClass: "help-block",
    errorPlacement: function(error, element) {
      error.appendTo(element.parent());
    }
  });
});

3.2 日期验证

<form id="myForm">
  <div class="form-group">
    <label for="inputDate">日期：</label>
    <input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="请输入日期(格式：YYYY/MM/DD)" required>
    <div class="help-block with-errors"></div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

$(function() {
  $("#myForm").bootstrapValidator({
    fields: {
      inputDate: {
        notEmpty: {
          message: "日期不能为空"
        },
        date: {
          format: "YYYY/MM/DD",
          message: "日期格式不正确"
        }
      }
    },
    errorElement: "div",
    errorClass: "help-block",
    errorPlacement: function(error, element) {
      error.appendTo(element.parent());
    }
  });
});

在这两个示例中，我们分别使用"emailAddress"和"date"校验规则，对邮箱和日期进行了校验。具体的规则和错误提示信息都可以根据需要进行自定义配置，以满足具体的业务需求。