BootStrapValidator初使用教程详解

什么是 Bootstrap Validator

Bootstrap Validator 是一个 jQuery 插件，它为表单验证提供了强大的支持。它可以在客户端对表单进行验证，用户在提交表单之前就可以知道表单是否正确。Bootstrap Validator 可以验证所有 HTML 输入元素，包括文本输入框、下拉框、单选按钮、复选框、文件上传等等。它通常是与 Bootstrap UI 框架一起使用，可以让你的表单更加美观、易用。

安装 Bootstrap Validator

你可以从 https://github.com/1000hz/bootstrap-validator 下载最新版的 Bootstrap Validator，也可以直接使用以下 CDN 链接：

<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

使用 Bootstrap Validator

使用 Bootstrap Validator 只需要几步：

1. 在表单元素上添加 data-bv-form 属性。
2. 在每个验证元素上添加 data-bv-field 属性。
3. 在你的 JavaScript 文件中启用 Bootstrap Validator。

下面是一个简单的例子：

<form id="myForm" data-bv-form>

  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" class="form-control" name="firstName" data-bv-field="firstName" required>
  </div>

  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" class="form-control" name="lastName" data-bv-field="lastName" required>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>


<script>
  $(document).ready(function() {
    $('#myForm').bootstrapValidator();
  });
</script>

在这个例子中，我们添加了 data-bv-form 属性到表单元素，以告诉 Bootstrap Validator 应该验证哪个表单。在表单中的每个元素都有一个 data-bv-field 属性。这个属性指定了验证元素的名称，并用于在错误消息中指定元素。我们还指定了每个输入元素是必填字段。最后，在 JavaScript 文件中，我们使用了 $('#myForm').bootstrapValidator() 方法来启用 Bootstrap Validator。

一个实际的例子

下面是一个使用 Bootstrap Validator 的实际例子，它是一个登陆表单。

<form id="loginForm" data-bv-form>

  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" name="email" data-bv-field="email" required>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" data-bv-field="password" required>
  </div>

  <button type="submit" class="btn btn-primary">Login</button>

</form>


<script>
  $(document).ready(function() {
    $('#loginForm').bootstrapValidator({
      fields: {
        email: {
          validators: {
            notEmpty: {
              message: 'The email address is required'
            },
            emailAddress: {
              message: 'The input is not a valid email address'
            }
          }
        },
        password: {
          validators: {
            notEmpty: {
              message: 'The password is required'
            },
            stringLength: {
              min: 6,
              message: 'The password must be at least 6 characters long'
            }
          }
        }
      }
    });
  });
</script>

这个例子中，我们指定了两个验证元素，分别是 email 和 password。对于 email 元素，我们要求它必填，而且必须是一个有效的邮件地址。对于 password 元素，我们要求它必填，而且必须至少为 6 个字符。我们还可以添加其他验证规则，比如正则表达式、数值范围等等。