在Web开发中，表单验证是非常常见的一种需求。而使用Bootstrap Validator可以很方便地实现表单实时验证功能。本文将从以下几个方面详细阐述Bootstrap Validator的使用。
一、表单标记
要使用Bootstrap Validator，我们需要在HTML中引入相应的代码库。可以从Bootstrap Validator的GitHub主页下载代码库，或者使用CDN进行引入。以下是一个基本的表单标记的例子：
<form id="myForm" method="post">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" name="name" id="name" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" name="password" id="password" minlength="6" required>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
在上面的例子中，我们定义了一个名为“myForm”的表单，并在表单中加入了三个字段：姓名、邮箱和密码。其中姓名和邮箱是必填字段，密码长度必须大于等于6个字符。提交按钮使用了Bootstrap的样式。现在我们需要对这些字段进行实时验证。
二、验证规则
Bootstrap Validator使用的是自定义HTML5属性来设置验证规则。以下是一些常用的验证规则：
- required：必填字段
- email：邮箱格式
- url：URL格式
- number：数字格式
- date：日期格式
- minlength：最小长度
- maxlength：最大长度
- regexp：正则表达式
在上面的表单中，我们已经使用了required和minlength两个规则。如果需要添加其他规则，可以使用data-*属性来实现。例如，我们需要对邮箱地址进行服务器端校验：
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" name="email" id="email"
data-remote="/check-email" data-type="json" required>
<div class="help-block with-errors"></div>
</div>
在这里，我们添加了data-remote属性，并将其设为服务器端的校验URL。同时，我们还设置了data-type属性，告诉Bootstrap Validator服务器返回的是JSON格式的数据。在标记中，我们也添加了一个help-block元素，用于显示验证错误信息。
三、初始化
一旦我们定义了表单和规则，接下来就需要初始化Bootstrap Validator。我们需要在表单元素周围包裹一个
<form id="myForm" method="post">
<div class="form-group" data-toggle="validator"
data-disable="false" data-errors-container="#error-container">
<label for="name">姓名</label>
<input type="text" class="form-control" name="name" id="name" required>
</div>
<div class="form-group" data-toggle="validator">
<label for="email">邮箱</label>
<input type="email" class="form-control" name="email" id="email"
data-remote="/check-email" data-type="json" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group" data-toggle="validator">
<label for="password">密码</label>
<input type="password" class="form-control" name="password" id="password"
minlength="6" required>
</div>
<button type="submit" class="btn btn-primary">提交</button>
<div id="error-container"></div>
</form>
在JavaScript中，我们可以使用jQuery选择器来选中表单，并初始化Bootstrap Validator。以下是一个例子：
$('#myForm').validator({
// 设置验证错误信息的容器
errorsContainer: '#error-container',
// 提交表单时是否禁用按钮
disable: false,
// 自定义错误提示信息
messages: {
required: '该字段为必填字段',
minlength: '该字段长度必须大于{0}',
remote: '该字段已存在'
},
// 自定义验证规则
custom: {
// 判断手机号码是否合法
phone: function($el) {
var phone = $el.val();
return /^\d{11}$/.test(phone);
}
}
});
在上面的例子中，我们使用了以下选项：
- errorsContainer：设置验证错误信息的容器。
- disable：提交表单时是否禁用按钮。
- messages：自定义验证错误提示信息。
- custom：自定义验证规则。
四、实时验证
一旦我们初始化了Bootstrap Validator，表单中的字段就会被实时验证。例如，在上面的表单中，如果用户名为空或者密码长度小于6个字符，提交按钮就会被禁用，并且提示错误信息。如果邮箱地址已经被占用，也会显示相应的错误提示。
在验证过程中，Bootstrap Validator会自动显示错误信息。对于每个字段，它会显示相应的帮助块元素，并添加错误样式。如果验证通过，则会隐藏帮助块元素，并移除错误样式。我们可以通过CSS来自定义错误样式：
.has-error .help-block {
color: #a94442;
}
.has-error input {
border-color: #a94442;
}
在上面的CSS中，我们定义了.has-error class，用于显示错误样式。如果一个元素包含了这个class，它会显示红色边框和红色文字。
五、总结
使用Bootstrap Validator可以轻松实现实时表单验证功能。我们需要定义表单和验证规则，然后初始化Bootstrap Validator。在实时验证过程中，Bootstrap Validator会自动显示错误信息。我们可以使用CSS来自定义错误样式。最后，可以根据实际需求添加自定义验证规则和错误提示信息。
