BootstrapValidator超详细教程(推荐)

简介

BootstrapValidator 是一个针对 Bootstrap 的表单验证插件，能够在客户端对表单进行验证，使得用户在提交表单前能够方便地发现并修复错误。BootstrapValidator 具备以下特点：

友好的 UI 体验
支持多种校验方式，如正则表达式、长度等
支持 Ajax 校验
支持多语言

安装

安装 BootstrapValidator 可以通过多种方式，如下载压缩包或使用 npm 安装。这里我们介绍使用 CDN 引入的方式。

在 HTML 中引入 BootstrapValidator 的 CSS 和 JS 文件，以及 jQuery 和 Bootstrap 的文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.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/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

使用

在 HTML 表单中添加 data 属性，如 data-bv-*，然后使用 JavaScript 初始化 BootstrapValidator。以下是一个简单的例子，展示了如何在表单中验证用户名和密码：

HTML 代码：

<form id="myForm">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" class="form-control" name="username" required data-bv-remote url="/checkUserName" data-bv-remote-message="该用户名已被注册，请更换用户名" />
  </div>
  <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" name="password" required data-bv-stringlength data-bv-stringlength-min="6" data-bv-stringlength-max="16" />
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

JavaScript 代码：

$('#myForm').bootstrapValidator({
  fields: {
    username: {
      validators: {
        notEmpty: {
          message: '用户名不能为空'
        },
        remote: {
          message: '该用户名已被注册，请更换用户名',
          url: '/checkUserName',
          type: 'POST'
        }
      }
    },
    password: {
      validators: {
        notEmpty: {
          message: '密码不能为空'
        },
        stringLength: {
          min: 6,
          max: 16,
          message: '密码长度必须在 6 到 16 个字符之间'
        }
      }
    }
  }
})

上面的代码中，我们使用了 data-bv-* 属性实现了客户端验证的功能，并使用了 JavaScript 初始化了 BootstrapValidator，设置了验证规则和提示。其中，remote 规则可以进行 Ajax 校验，在 url 参数中设置远程校验的 URL。

示例

这里提供两个示例，一个是基本的表单验证，另一个是带有 Ajax 校验的表单验证。

基本的表单验证

通过 BootstrapValidator 官网提供的基本示例，演示一个表单验证的案例。

HTML 代码：

<form id="myForm" class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Full name *</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" name="firstName" placeholder="First name" />
    </div>
    <div class="col-sm-7 col-sm-offset-3">
      <input type="text" class="form-control" name="lastName" placeholder="Last name" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Username *</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" name="username" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Email address *</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Password *</label>
    <div class="col-sm-7">
      <input type="password" class="form-control" name="password" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">Re-enter password *</label>
    <div class="col-sm-7">
      <input type="password" class="form-control" name="confirmPassword" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <div class="checkbox">
        <label><input type="checkbox" name="agree" /> Agree with the terms and conditions</label>
      </div>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-primary">Register</button>
    </div>
  </div>
</form>

JavaScript 代码：

$('#myForm').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
    firstName: {
      message: 'The first name is not valid',
      validators: {
        notEmpty: {
          message: 'The first name is required and cannot be empty'
        }
      }
    },
    lastName: {
      message: 'The last name is not valid',
      validators: {
        notEmpty: {
          message: 'The last name is required and cannot be empty'
        }
      }
    },
    username: {
      message: 'The username is not valid',
      validators: {
        notEmpty: {
          message: 'The username is required and cannot be empty'
        },
        stringLength: {
          min: 6,
          max: 30,
          message: 'The username must be more than 6 and less than 30 characters long'
        },
        regexp: {
          regexp: /^[a-zA-Z0-9_\.]+$/,
          message: 'The username can only consist of alphabetical, number, dot and underscore'
        }
      }
    },
    email: {
      validators: {
        notEmpty: {
          message: 'The email address is required and cannot be empty'
        },
        emailAddress: {
          message: 'The input is not a valid email address'
        }
      }
    },
    password: {
      validators: {
        notEmpty: {
          message: 'The password is required and cannot be empty'
        },
        stringLength: {
          min: 6,
          message: 'The password must be more than 6 characters long'
        },
        different: {
          field: 'username',
          message: 'The password cannot be the same as username'
        }
      }
    },
    confirmPassword: {
      validators: {
        notEmpty: {
          message: 'The confirm password is required and cannot be empty'
        },
        identical: {
          field: 'password',
          message: 'The password and confirm password are not the same'
        }
      }
    },
    agree: {
      validators: {
        notEmpty: {
          message: 'You must agree with the terms and conditions'
        }
      }
    }
  }
});

这个例子演示了输入框的实时验证、异步验证、即时反馈等功能。

带有 Ajax 校验的表单验证

在表单验证中，有时候需要通过 Ajax 获取数据并进行校验。这个例子演示了如何使用 BootstrapValidator 进行 Ajax 校验。

HTML 代码：

<form id="ajaxForm" method="post" class="form-horizontal" action="submitAjax.php">
  <div class="form-group">
    <label class="col-sm-3 control-label">用户名</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" name="username" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-3 control-label">电子邮箱</label>
    <div class="col-sm-7">
      <input type="email" class="form-control" name="email" />
    </div>
  </div>

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

在 JavaScript 中发起 Ajax 校验，并通过 BootstrapValidator 进行验证：

var submitUrl = "submitAjax.php"; // 真实提交地址
$('#ajaxForm').bootstrapValidator({
  live: 'enabled',
  submitButtons: 'button[type="submit"]',
  message: 'This value is not valid',
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
    username: {
      message: 'The username is not valid',
      validators: {
        notEmpty: {
          message: 'The username is required and cannot be empty'
        },
        remote: {
          message: 'The username is not available',
          url: submitUrl,
          type: 'POST',
          data: {
            checkType: 'username'
          }
        }
      }
    },
    email: {
      validators: {
        notEmpty: {
          message: 'The email address is required and cannot be empty'
        },
        emailAddress: {
          message: 'The input is not a valid email address'
        },
        remote: {
          message: 'This email has been registered',
          url: submitUrl,
          type: 'POST',
          data: {
            checkType: 'email'
          }
        }
      }
    }
  }
});

在 submitAjax.php 文件中获取数据并进行校验：

<?php

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    // 获取查询类型
    $checkType = isset($_POST['checkType']) ? $_POST['checkType'] : '';

    if ($checkType === 'username') {// 校验用户名
        $username = isset($_POST['username']) ? $_POST['username'] : '';
        if ($username === 'admin') {
            echo json_encode(['valid'=>false]);
        } else {
            echo json_encode(['valid'=>true]);
        }
    } elseif ($checkType === 'email') {// 校验电子邮件
        $email = isset($_POST['email']) ? $_POST['email'] : '';
        if ($email === 'admin@qq.com') {
            echo json_encode(['valid'=>false]);
        } else {
            echo json_encode(['valid'=>true]);
        }
    } else {
        echo json_encode(['valid'=>true]);
    }
}
?>

这个例子演示了如何结合 BootstrapValidator 和后端配合使用。在实际项目中，这种方式非常常见。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BootstrapValidator超详细教程(推荐) - Python技术站

BootstrapValidator超详细教程(推荐)