BootstrapValidator表单验证插件学习

什么是BootstrapValidator？

BootstrapValidator是一个基于Bootstrap的表单验证插件，它可以用于客户端表单验证，使用简单但功能强大，并且支持多种验证方式。

开始使用BootstrapValidator

引入步骤

1. 先引入jQuery和Bootstrap框架文件
2. 在jQuery和Bootstrap文件后引入BootstrapValidator的CSS和JS等文件

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

<!-- 引入js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

HTML结构

在页面中创建一个表单

<form id="formDemo">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" class="form-control" name="username" placeholder="请输入用户名">
  </div>

  <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" name="password" placeholder="请输入密码">
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

初始化插件

在页面中添加以下JS代码

$(document).ready(function() {
    $('#formDemo').bootstrapValidator({
        // 验证规则
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 12,
                        message: '用户名长度必须在6到12位之间'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '密码长度必须在6到18位之间'
                    }
                }
            }
        }
    });
});

这里只做简单的说明，具体的验证规则可以根据需求灵活设置。

两个示例

示例1：邮箱格式验证

表单中需要验证邮箱格式，代码如下

<form id="formDemo">
  <div class="form-group">
    <label>邮箱</label>
    <input type="email" class="form-control" name="email" placeholder="请输入邮箱">
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

$(document).ready(function() {
  $('#formDemo').bootstrapValidator({
    fields: {
      email: {
        validators: {
          notEmpty: {
            message: '邮箱不能为空'
          },
          emailAddress: {
            message: '邮箱格式不正确'
          }
        }
      }
    }
  });
});

示例2：手机号格式验证

表单中需要验证手机号格式，代码如下

<form id="formDemo">
  <div class="form-group">
    <label>手机号</label>
    <input type="tel" class="form-control" name="phone" placeholder="请输入手机号">
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

$(document).ready(function() {
  $('#formDemo').bootstrapValidator({
    fields: {
      phone: {
        validators: {
          notEmpty: {
            message: '手机号不能为空'
          },
          phone: {
            country: 'CN',
            message: '手机号格式不正确'
          }
        }
      }
    }
  });
});

结语

通过以上步骤，我们就可以愉快的使用BootstrapValidator了，它将大大减轻开发者验证表单数据的工作量，提高开发效率，降低工作难度。