bootstrap 5 表单验证
Bootstrap 是一个功能强大、功能丰富的前端工具包。bootstrap 以其优秀的栅格系统，为网页创作带来的极大的方便。目前版本是5.2 。然而在表单验证（formvalidation）它却是收费的,有没有办法使用其它办法来验证Bootstrap5表单？办法是有的。虽然Bootstrap 5 放弃了jQuer,但想要验证我们不得不把jQuer重新拾起来，下面介绍一款使用jQuer来验证表单的前端控件zpjbvalidator.js的使用方法。
zpjbvalidator.js表单验证演示：
bootstrap 5.13
1、邮箱验证
2、密码验证
3、单选框验证
4、多选框验证
5、文本区域验证
6、复选框验证
7、网址验证
8、自定义-最小-最大
9、自定义最小长度-最大长度
10、文件长度-日期等验证
11、远程失败验证
11、远程成功验证
1、 zpjbvalidator的前世今生
zpjbvalidator改编自jbvalidator是一个全新的基于jQuery的表单验证插件，它是为最新的Bootstrap 5框架创建的，理论上支持Bootstrap 3，Bootstrap 4支持客户端和服务器端验证。在原有功能基础上，修改了其核心代码。为了区别与源代码，将文件名更改为zpjbvalidator.js
1.1、原jbvalidator所具有的功能：
1. 2、zpjbvalidator在jbvalidator的基础上增加如下功能：
2.1、loading样式加载
<link href="../assets/vendor/jbvalidator/zpjbvalidator.css" rel="stylesheet">
2.2、bootstrap5 核心验证加载
<script src="../assets/vendor/jbvalidator/zpjvalidator.js"></script>
3、 字段说明
Html 5 验证
data-v-equal: 验证两个INPUT框中的内容是否相等，这对密码验证是有用的。
data-v-min-select: 下拉多选框最少选项
data-v-max-select: 下拉多选框最大选项
data-checkbox-group: 组复选框元素的父属性
data-v-min: min属性的替代，它可以用于属性类型文本
data-v-max: Max属性的替代，这可以用于属性类型文本
data-v-min-length: minlength属性的替代
data-v-max-length: maxlength属性的替代
data-v-min-size: 输入类型文件最小文件大小(字节)
data-v-max-size: 输入类型文件最大文件大小(字节)
data-v-message: 错误消息替代
class="select-parent form-control"：在添加下拉多选框时必须添加一个"div 将下拉多选框包裹其中
4、 使用方法
validator: 添加新的自定义验证
checkAll(formSelector = null, event = null): 显示错误而不提交表单，返回错误计数
errorTrigger(inputSelector, message): 显示从服务器返回的错误消息.
successTrigger(inputSelector, message): 显示从服务器返回的成功消息.
loadingTrigger(inputSelector, message): 显示等待从服务器返回消息.
reload(): 添加动态元素后重新加载实例
4.1、如何使用
表单的form属性必须是 novalidate <form novalidate>
<script src="dist/jbvalidator.min.js"></script>
<script>
$(function () {
let validator = $('form.needs-validation').jbvalidator({
errorMessage: true,//如果为flase则不显示错误信息
successClass: true,//如果为flase则不显示成功信息
//可以使用英文与中文如果用英文使用en.json
language: '../assets/js/validation/lang/cn.json'
var valid = validator.validator;
//新的自定义验证方法
valid.password = function (el, event) {
if ($(el).is('[name=password]') && $(el).val().length < 5) {
return '密码必须包含字母、数字和特殊字符，且在6~18位之间.';
return '';
valid.UserName = function (el, event) {
if ($(el).is('[name=username]') && $(el).val().length < 2) {
return '用户名不能有数字字符！且在2~18位之间.';
</script>
4.2、 服务器验证
您可以显示从服务器返回的错误消息。".errorTrigger"方法可以用于此目的。
.errorTrigger(element, message)
您也可以显示从服务器返回的成功消息。".successTrigger"方法可以用于此目的。
.successTrigger(element, message)
您还可以显示等待消息返回从服务器端。".loadingTrigger,"方法可以用于此目的。
.loadingTrigger,(element, message)
<script src="dist/jbvalidator.min.js"></script>
<script>
$(function () {
let validatorServerSide = $('form.validatorServerSide').jbvalidator({
//是否显示服务端验证成功与失败信息true:显示flase：不显示
errorMessage: true,
successMessage: true,
loadingMessage: true
language: '../assets/js/validation/lang/cn.json'
//serverside
const eamil = document.querySelector('input[name=email]');
$(document).on('change', '.validatorServerSide', function () {
//实例化axios
const _AXIOS = axios.create()
var message = 'loading...'
//等待服务器返回消息
validatorServerSide.loadingTrigger($('[name=email]'), message)
//获取邮箱验证状态
var ce = eamil.validity;
//如果required（必填项）与pattern（正则验证)通过则
if (ce.valueMissing === false && ce.patternMismatch === false) {
let obj = { email: eamil.value }
// 添加请求拦截
_AXIOS.interceptors.request.use(function (config) {
//let userinfo = window.sessionStorage.getItem('token')
let userinfo = window.localStorage.getItem("token")
// 判断token存在再做配置
if (userinfo) {
//let token = JSON.parse(userinfo).token
config.headers.authorization = userinfo
} else {
config.headers.authorization = '0000'
return config
}, function (error) {
// 请求错误做一些事情
return Promise.reject(error);
// 添加响应拦截
_AXIOS.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
var config = err.config;
// 如果config不存在或没有设置重试选项，则拒绝
if (!config || !config.retry) return Promise.reject(err);
// 设置用于跟踪重试计数的变量
config.__retryCount = config.__retryCount || 0;
//检查我们是否已经把重试的总次数加到了最大值
if (config.__retryCount >= config.retry) {
// Reject with the error
return Promise.reject(err);
// 增加重试次数
config.__retryCount += 1;
//创造新的promise来处理指数后退
var backoff = new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, config.retryDelay || 1);
// 返回调用axios以重试请求的promise
return backoff.then(function () {
return _AXIOS(config);
_AXIOS({
method: 'POST',
url: "valid/valid-email",
data: obj,
timeout: 10000, //超时时间起作用必须实例化一下axios
retry: 3, //请求超时重新发起请求
retryDelay: 1000 //失败请求之间等待的毫秒数（默认为 1）;重新发起请求间隔
}).then((response) => {
if (response.data) {
var { code, message } = response.data
//服务器返回code：200为成功其它为失败
if (code == 200) {
validatorServerSide.successTrigger($('[name=email]'), message)
else {
validatorServerSide.errorTrigger($('[name=email]'), message)
} else {
throw new Error(`${response.status} ${response.statusText} ${response.url}`);
}).catch((error) => {
message = '出现错误服务器没有响应，请检测网络' + error
validatorServerSide.errorTrigger($('[name=email]'), message)
return false;
</script>
4.3 Options选项
language: '', //json 文件存放地址
errorMessage: true,
successMessage: true,
loadingMessage: true,
html5BrowserDefault: true,
validFeedBackClass: 'valid-feedback',
invalidFeedBackClass: 'invalid-feedback',
loadingFeedBackClass: 'loading-feedback',
successFeedBackClass: 'success-feedback',
validClass: 'is-valid',
invalidClass: 'is-invalid',
loadingClass: 'is-loading',
successClass: 'is-success'
5、注意事项
使用下拉框多选项需要加载Bootstrap-select 本例使用的版本为 v1.14.0-beta3
下载地址：http://developer.snapappointments.com/bootstrap-select/
本例Bootstrap v5.1.3
下载地址：https://getbootstrap.com/
本例jQuery-3.60
下载地址：https://jquery.com/
如果使用axios远程验证请加载axios
下载地址：npm i axios
归来少年666
Vue.js
