BootstrapValidator是什么？
BootstrapValidator是一款基于Bootstrap的表单验证插件，它可以灵活地对各个表单字段进行验证，并给出提示信息。使用BootstrapValidator可以让表单验证变得简单、可靠和灵活，这也是它被广泛使用的主要原因。本篇文章将介绍BootstrapValidator的基本用法和一些实用技巧。
1. 安装和引入BootstrapValidator
BootstrapValidator可以通过npm进行安装，也可以直接下载文件引入。以下是通过npm安装和引入的方式：
安装BootstrapValidator：
npm install bootstrap-validator
引入BootstrapValidator：
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/bootstrapvalidator/css/bootstrapValidator.min.css">
<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/bootstrap/js/bootstrap.min.js"></script>
<script src="path/to/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
注意：在引入BootstrapValidator时需要确保已经引入了jQuery和Bootstrap相应版本的文件。
2. 表单验证基本用法
BootstrapValidator可以对不同类型的表单字段进行验证，包括文本框、密码框、下拉列表、单选按钮、复选框等等。以下是典型的表单验证代码实例：
2.1 普通文本框验证
<form id="demoForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" name="username" class="form-control" placeholder="请填写用户名">
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#demoForm').bootstrapValidator({
message: '这个值是无效的',
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
}
}
}
}
});
});
</script>
上述代码主要实现了对用户名文本框的非空验证，这里使用了BootstrapValidator提供的`notEmpty`验证器。在实现时，我们需要先为要验证的元素绑定一个id，这里是`demoForm`，然后在js代码中使用`bootstrapValidator`方法来进行初始化，同时可以对不同的字段进行验证，这里只使用了一个`username`字段。
为了让验证结果可以在表单提交之前得到体现，在表单提交事件中需要加入以下代码：
$('#demoForm').bootstrapValidator('validate');
if ($('#demoForm').data('bootstrapValidator').isValid()) {
// 表单验证通过，可以提交数据
}
这里需要说明一下，`bootstrapValidator`方法除了可以对表单进行初始化，还可以接受不同的参数，其最常用的用法是传入字符串方法名来调用相应的方法、传入对象来进行初始化或者传入字符串和对象来进行初始化。这里我们使用的是传入`'validate'`字符串来验证表单的方法。
2.2 多个验证器的复杂验证
BootstrapValidator支持多个验证器的组合形式，应用场景广泛。下面是一个示例，展示了使用多个验证器实现复杂表单验证的方法：
<form id="otherForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">密码</label>
<div class="col-sm-6">
<input type="password" name="password" class="form-control" placeholder="请填写密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">确认密码</label>
<div class="col-sm-6">
<input type="password" name="confirmpass" class="form-control" placeholder="请确认密码">
</div>
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#otherForm').bootstrapValidator({
message: '这个值是无效的',
fields: {
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
different: {
field: 'username',
message: '密码不能与用户名相同'
}
}
},
confirmpass: {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次输入的密码不一致'
}
}
}
}
});
});
</script>
上述代码主要实现了对密码和确认密码两个文本框的验证，采用了两个验证器：`notEmpty`和`different`。另外，为了实现两个密码框的一致性验证，`identical`验证器也被加入到验证规则当中。
2.3 高级用法：远程验证
在实际应用中，我们经常需要进行远程验证操作。BootstrapValidator也支持远程验证。下面是一个示例，展示了如何使用远程验证器：
<form id="remoteForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">邮箱地址</label>
<div class="col-sm-6">
<input type="email" name="email" class="form-control" placeholder="请填写邮箱地址">
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#remoteForm').bootstrapValidator({
message: '这个值是无效的',
fields: {
email: {
validators: {
notEmpty: {
message: '邮箱地址不能为空'
},
emailAddress: {
message: '请填写正确的邮箱地址'
},
remote: {
url: 'path/to/server', // 远程验证的url
message: '邮箱地址已经被使用'
}
}
}
}
});
});
</script>
上述代码主要实现了对邮箱地址文本框的远程验证，使用了`remote`验证器。需要注意的是，远程验证器会在用户焦点移出文本框时自动执行，向服务器端发送请求进行验证。
3. 表单验证实用技巧
3.1 动态添加和删除验证
当表单上传新的字段或删除已经存在的字段时，我们需要实现动态添加或删除相应的验证。以下是一个示例代码，展示了如何在动态添加和删除验证：
<button class="btn btn-default addButton" type="button">添加</button>
<button class="btn btn-default removeButton" type="button">删除</button>
<form id="dynamicForm" class="form-horizontal">
<!-- 先动态添加username字段 -->
<div class="form-group">
<label class="col-sm-3 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" name="username" class="form-control" placeholder="请填写用户名">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
// 动态添加username字段的验证
$('#dynamicForm').bootstrapValidator('addField', 'username', {
validators: {
notEmpty: {
message: '用户名不能为空'
}
}
});
// 添加按钮事件
$('.addButton').click(function() {
// 动态添加email字段
$('#dynamicForm').append('<div class="form-group"><label class="col-sm-3 control-label">邮箱地址</label><div class="col-sm-6"><input type="email" name="email" class="form-control" placeholder="请填写邮箱地址"></div></div>');
$('#dynamicForm').bootstrapValidator('addField', 'email', {
validators: {
notEmpty: {
message: '邮箱地址不能为空'
},
emailAddress: {
message: '请填写正确的邮箱地址'
}
}
});
});
// 删除按钮事件
$('.removeButton').click(function() {
$('#dynamicForm').bootstrapValidator('removeField', 'email');
$('#dynamicForm').find('.form-group').last().remove();
});
});
</script>
上述代码中，我们使用了`addField`和`removeField`方法来动态添加和删除字段验证。这里以邮箱字段为例，演示了添加和删除验证的方法。
3.2 自定义提示信息
在默认情况下，BootstrapValidator会使用内置的提示信息，但我们也可以自定义提示信息。以下是一个示例，展示了如何自定义提示信息：
<form id="customForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" name="username" class="form-control" placeholder="请填写用户名">
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#customForm').bootstrapValidator({
message: '这个值是无效的',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: '请输入用户名'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含字母、数字和下划线'
}
},
onSuccess: function(e, data) {
// 验证成功后的操作
// ...
}
}
}
});
});
</script>
上述代码中，我们使用了`message`和`feedbackIcons`两个属性来自定义提示信息和图标。在执行时，如果验证失败，BootstrapValidator会根据具体的验证器自动选取相应的提示信息。如果我们自定义了提示信息，那么BootstrapValidator会使用我们自定义的提示信息。
3.3 嵌套表单验证
在实际应用中，我们经常需要对嵌套表单进行验证。BootstrapValidator可以支持嵌套表单验证，以下是一个示例：
<form id="nestedForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">实名认证</label>
<div class="col-sm-6">
<label class="radio-inline"><input type="radio" name="authentication" value="1">否</label>
<label class="radio-inline"><input type="radio" name="authentication" value="2">是</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">真实姓名</label>
<div class="col-sm-6">
<input type="text" name="realname" class="form-control hidden">
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#nestedForm').bootstrapValidator({
message: '这个值是无效的',
fields: {
authentication: {
validators: {
notEmpty: {
message: '请选择是否实名认证'
}
}
},
realname: {
validators: {
notEmpty: {
message: '真实姓名不能为空'
},
regexp: {
regexp: /^[\u4e00-\u9fa5]+$/,
message: '请填写正确的中文姓名'
}
}
}
}
})
// 嵌套表单验证
.on('success.form.bv', function(e, data) {
// 如果用户是实名认证，则需要验证真实姓名
if ($('input[name="authentication"]:checked').val() === '2') {
$('#nestedForm').bootstrapValidator('addField', 'realname', {
validators: {
notEmpty: {
message: '真实姓名不能为空'
},
regexp: {
regexp: /^[\u4e00-\u9fa5]+$/,
message: '请填写正确的中文姓名'
}
}
});
$('#nestedForm').bootstrapValidator('validateField', 'realname');
} else {
// 如果用户没有实名认证，则需要清除真实姓名的验证
$('#nestedForm').bootstrapValidator('removeField', 'realname');
}
});
});
</script>
上述代码中，我们使用BootstrapValidator提供的`addField`和`removeField`方法来实现嵌套表单的验证。在嵌套表单验证时，我们需要推迟验证操作，等到获得数据之后再进行验证流程。
总结
BootstrapValidator是一款非常实用的表单验证插件，使用它可以轻松实现表单验证，提高用户输入数据的准确度。本篇文章介绍了BootstrapValidator的基本用法和一些实用技巧。下一篇文章，我们将介绍如何使用BootstrapValidator实现更加复杂的表单验证需求。