jquery插件bootstrapValidator数据验证详解

什么是jquery插件bootstrapValidator

jquery插件bootstrapValidator是一个基于jquery和Bootstrap框架的表单验证插件。它可以在客户端实现表单的各种验证功能。

如何使用jquery插件bootstrapValidator

使用jquery插件bootstrapValidator需要三个步骤：

1. 引入CSS和JS文件

该插件需要引入jquery库和Bootstrap框架，同时还要引入bootstrapValidator CSS和JS文件。可以在bootstrapValidator官网下载或使用cdnjs等CDN进行引入。

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />

<!-- 引入JS文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

1. 定义表单和验证规则

在HTML中定义表单，并为各个需要验证的元素添加必要的属性和值。比如，可以使用data-bv-notempty属性来指定该元素不能为空。

<form id="myForm" method="post" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-3 control-label">用户名：</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="username" data-bv-notempty="true"
        data-bv-notempty-message="用户名不能为空" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-3 control-label">密码：</label>
    <div class="col-lg-4">
      <input type="password" class="form-control" name="password" data-bv-notempty="true"
        data-bv-notempty-message="密码不能为空" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-lg-offset-3 col-lg-6">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

同时，在JS中定义相应的验证规则。比如，可以使用notEmpty规则来指定某个元素不能为空。

$(document).ready(function () {
  // 表单验证规则
  $('#myForm').bootstrapValidator({
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          }
        }
      }
    }
  });
});

1. 使用表单验证

在表单提交时，使用validate方法进行表单验证，并根据验证结果进行相应的处理。

$(document).ready(function () {
  // 表单验证规则
  $('#myForm').bootstrapValidator({
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          }
        }
      }
    }
  });

  // 提交表单
  $('#myForm').submit(function () {
    if ($('#myForm').bootstrapValidator('validate').isValid()) {
      alert('表单验证通过！');
    }
    return false;
  });
});

示例1：用户名必须是邮箱

<form id="myForm" method="post" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-3 control-label">邮箱：</label>
    <div class="col-lg-4">
      <input type="text" class="form-control" name="email" data-bv-notempty="true"
        data-bv-notempty-message="邮箱不能为空" data-bv-emailaddress="true" data-bv-emailaddress-message="邮箱格式不正确" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-lg-offset-3 col-lg-6">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

<script>
$(document).ready(function () {
  // 表单验证规则
  $('#myForm').bootstrapValidator({
    fields: {
      email: {
        validators: {
          notEmpty: {
            message: '邮箱不能为空'
          },
          emailAddress: {
            message: '邮箱格式不正确'
          }
        }
      }
    }
  });

  // 提交表单
  $('#myForm').submit(function () {
    if ($('#myForm').bootstrapValidator('validate').isValid()) {
      alert('表单验证通过！');
    }
    return false;
  });
});
</script>

在此示例中，我们增加了一个验证规则emailAddress，用于检查输入的用户名是否符合邮箱格式。

示例2：两次密码输入必须一致

<form id="myForm" method="post" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-3 control-label">密码：</label>
    <div class="col-lg-4">
      <input type="password" class="form-control" name="password" data-bv-notempty="true"
        data-bv-notempty-message="密码不能为空" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-3 control-label">确认密码：</label>
    <div class="col-lg-4">
      <input type="password" class="form-control" name="confirmPassword" data-bv-notempty="true"
        data-bv-notempty-message="确认密码不能为空" data-bv-identical="true" data-bv-identical-field="password"
        data-bv-identical-message="两次密码输入不一致" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-lg-offset-3 col-lg-6">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

<script>
$(document).ready(function () {
  // 表单验证规则
  $('#myForm').bootstrapValidator({
    fields: {
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
        }
      },
      confirmPassword: {
        validators: {
          notEmpty: {
            message: '确认密码不能为空'
          },
          identical: {
            field: 'password',
            message: '两次密码输入不一致'
          }
        }
      }
    }
  });

  // 提交表单
  $('#myForm').submit(function () {
    if ($('#myForm').bootstrapValidator('validate').isValid()) {
      alert('表单验证通过！');
    }
    return false;
  });
});
</script>

在此示例中，我们使用了identical规则，它需要指定验证的目标field，并在验证失败时返回相应的message。