使用BootStrapValidator完成前端输入验证

使用 BootStrapValidator 完成前端输入验证的完整攻略如下：

步骤一：引入 BootStrap 和 BootStrapValidator 库

首先，需要引入 BootStrap 和 BootStrapValidator 两个库：

<!-- BootStrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- BootStrap JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- BootStrapValidator CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">

<!-- BootStrapValidator JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

步骤二：编写HTML代码

在HTML表单中，给需要验证的表单元素添加相关属性：

<form id="form" class="form-horizontal" method="post" action="#">
  <div class="form-group">
    <label class="col-sm-3 control-label">手机号码：</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" name="phone" placeholder="请输入手机号" data-bv-notempty="true"
             data-bv-regexp="true" data-bv-regexp-regexp="^1[3456789]\d{9}$" data-bv-regexp-message="手机号码格式不正确"
             data-bv-message="请输入手机号" autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">邮箱地址：</label>
    <div class="col-sm-5">
      <input type="email" class="form-control" name="email" placeholder="请输入邮箱地址" data-bv-notempty="true"
             data-bv-emailaddress="true" data-bv-emailaddress-message="邮箱地址格式不正确" data-bv-message="请输入邮箱地址"
             autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">密码：</label>
    <div class="col-sm-5">
      <input type="password" class="form-control" name="password" placeholder="请输入密码" data-bv-notempty="true"
             data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="12" data-bv-message="请输入密码长度为6-12位"
             autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-5">
      <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
    </div>
  </div>
</form>

步骤三：编写JavaScript代码

在JavaScript中，使用 BootStrapValidator 对表单进行验证：

//表单验证
$('#form').bootstrapValidator({
  //提示图标
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  //指定验证字段
  fields: {
    phone: {
      //验证规则
      validators: {
        notEmpty: {
          message: '手机号码不能为空'
        },
        regexp: {
          regexp: /^1[3456789]\d{9}$/,
          message: '请输入11位手机号码'
        }
      }
    },
    email: {
      //验证规则
      validators: {
        notEmpty: {
          message: '邮箱地址不能为空'
        },
        emailAddress: {
          message: '请输入正确的邮箱地址'
        }
      }
    },
    password: {
      validators: {
        notEmpty: {
          message: '密码不能为空'
        },
        stringLength: {
          min: 6,
          max: 12,
          message: '请输入长度为6-12位的密码'
        }
      }
    }
  }
});

//表单提交
$('#saveBtn').click(function () {
  $('#form').bootstrapValidator('validate');
  if ($('#form').data('bootstrapValidator').isValid()) {
    //表单提交操作
  }
});

示例说明一：手机号码输入验证

<input type="text" class="form-control" name="phone" placeholder="请输入手机号" data-bv-notempty="true"
       data-bv-regexp="true" data-bv-regexp-regexp="^1[3456789]\d{9}$" data-bv-regexp-message="手机号码格式不正确"
       data-bv-message="请输入手机号" autocomplete="off">

在此示例中，输入框会接受用户输入的手机号码，并在实时输入的同时进行验证。数据验证规则所设置的条件为：

• 输入不能为空，即设置 data-bv-notempty="true"
• 手机号码格式必须符合 ^1[3456789]\d{9}$ 的正则表达式，即设置 data-bv-regexp="true" data-bv-regexp-regexp="^1[3456789]\d{9}$" data-bv-regexp-message="手机号码格式不正确"

其中，data-bv-notempty="true" 表示该输入框的输入不能为空，data-bv-regexp="true" 表示需要使用正则表达式进行输入验证， data-bv-regexp-regexp="^1[3456789]\d{9}$" 表示该标签所进行的验证规则为 手机号码格式，至于 data-bv-regexp-message= 则出现在输入框下方的提示信息中。关于这些规则的具体设置，可参考 BootStrapValidator 的官方文档。

示例说明二：密码输入验证

<input type="password" class="form-control" name="password" placeholder="请输入密码" data-bv-notempty="true"
       data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="12" data-bv-message="请输入密码长度为6-12位"
       autocomplete="off">

在此示例中，输入框会接受用户输入的密码，并在实时输入的同时进行验证。数据验证规则所设置的条件为：

• 输入不能为空，即设置 data-bv-notempty="true"
• 输入密码的长度区间应在 6 到 12 的范围内，即设置 data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="12"
• 密码长度不能超出 6-12 个字符，即设置提示信息为 请输入密码长度为6-12位

至于 data-bv-notempty="true" 的含义则已解释在前面了，这里就不再赘述。关于这些规则的详细设置，同样可以参考 BootStrapValidator 的官方文档。