下面是对“Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解”的完整攻略：
BootstrapValidator简介
BootstrapValidator是一款基于jQuery和Bootstrap的强大表单验证插件。它能够快速、简单地实现表单验证功能，并且拥有丰富的配置选项，支持多种类型的表单验证规则。
BootstrapValidator的使用步骤
使用BootstrapValidator需要进行以下步骤：
步骤1：引入相关文件
在HTML文件中引入相关的文件，包括jQuery、Bootstrap以及BootstrapValidator的CSS和JS文件。具体代码如下：
<!-- 引入jQuery文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入Bootstrap文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- 引入BootstrapValidator文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
步骤2：编写HTML代码
编写需要验证的表单的HTML代码，并给需要验证的表单控件添加相应的验证规则，如下所示：
<form id="myForm" action="#" method="post">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名"
data-bv-notempty="true" data-bv-notempty-message="用户名不能为空"
data-bv-stringlength="true" data-bv-stringlength-min="3" data-bv-stringlength-max="10"
data-bv-stringlength-message="用户名长度必须在3-10个字符之间">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码"
data-bv-notempty="true" data-bv-notempty-message="密码不能为空"
data-bv-identical="true" data-bv-identical-field="confirmPassword"
data-bv-identical-message="两次输入的密码不一致">
</div>
<div class="form-group">
<label for="confirmPassword">确认密码：</label>
<input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="请确认密码"
data-bv-notempty="true" data-bv-notempty-message="确认密码不能为空"
data-bv-identical="true" data-bv-identical-field="password"
data-bv-identical-message="两次输入的密码不一致">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
在以上代码中，我们给每一个需要验证的表单控件添加了相应的data-bv-*属性，这些属性是用来指定验证规则的。例如，data-bv-notempty="true"指定此表单控件不能为空。
步骤3：初始化BootstrapValidator
在页面加载完成后，需要对表单进行初始化。在初始化过程中，我们需要指定表单的ID以及相应的验证规则，具体代码如下：
$(document).ready(function() {
$('#myForm').bootstrapValidator({
message: '输入无效', // 默认的提示消息
feedbackIcons: { // 根据验证结果显示的图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: { // 每个表单控件的验证规则
username: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 3,
max: 10,
message: '用户名长度必须在3-10个字符之间'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
identical: {
field: 'confirmPassword',
message: '两次输入的密码不一致'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次输入的密码不一致'
}
}
}
}
})
})
在以上代码中，我们指定了每个表单控件的验证规则，并且可以根据需要自定义提示消息和图标。
示例
示例1：实现手机号码验证
下面是一个实现手机号码验证的示例：
<form id="myForm" action="#" method="post">
<div class="form-group">
<label for="phone">手机号码：</label>
<input type="text" class="form-control" name="phone" id="phone" placeholder="请输入手机号码"
data-bv-notempty="true" data-bv-notempty-message="手机号码不能为空"
data-bv-regexp="true" data-bv-regexp-regexp="^1[3|4|5|7|8][0-9]{9}$"
data-bv-regexp-message="手机号码格式不正确">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
在上面的示例中，我们给手机号码输入框添加了data-bv-regexp属性，用来指定验证规则。其中，data-bv-regexp-regexp="^1[3|4|5|7|8][0-9]{9}$"指定手机号码必须符合以1开头，第二个数字为3、4、5、7、8中的一个，后面跟着9位数字的规则。
示例2：添加自定义的验证规则
下面是一个添加自定义的验证规则的示例：
// 添加一个自定义的表单验证规则
$.fn.bootstrapValidator.validators.idcard = {
validate: function(validator, $field, options) {
var value = $field.val();
var regex = /^\d{15}(\d{2}[A-Za-z0-9])?$/;
if (!regex.test(value))
return {
valid: false,
message: '身份证号码格式不正确'
};
var idcardArray = value.split('');
var areaMap = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '内蒙古',
21: '辽宁',
22: '吉林',
23: '黑龙江',
31: '上海',
32: '江苏',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山东',
41: '河南',
42: '湖北',
43: '湖南',
44: '广东',
45: '广西',
46: '海南',
50: '重庆',
51: '四川',
52: '贵州',
53: '云南',
54: '西藏',
61: '陕西',
62: '甘肃',
63: '青海',
64: '宁夏',
65: '新疆',
71: '台湾',
81: '香港',
82: '澳门',
91: '国外'
};
var weight = [
7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2
];
var checkCode = [
'1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'
];
var sum = 0;
for (var i = 0; i < 17; i++) {
sum += parseInt(idcardArray[i]) * weight[i];
}
var areaCode = value.substr(0, 2);
if (areaMap.hasOwnProperty(areaCode)) {
var year = parseInt(value.substr(6, 4));
var month = parseInt(value.substr(10, 2));
var day = parseInt(value.substr(12, 2));
var birthday = new Date(year, month - 1, day);
var today = new Date();
var age = today.getFullYear() - year;
if (birthday.getMonth() !== month - 1 || birthday.getDate() !== day)
return {
valid: false,
message: '身份证号码中的日期信息不正确'
};
if (age < 0 || age > 150)
return {
valid: false,
message: '身份证号码中的年龄信息不正确'
};
if (options && options.minAge && age < options.minAge)
return {
valid: false,
message: '必须大于等于' + options.minAge + '岁'
};
} else {
return {
valid: false,
message: '身份证号码中的区域信息不正确'
};
}
if (checkCode[sum % 11] !== value.substr(17, 1))
return {
valid: false,
message: '身份证号码校验码不正确'
};
return {
valid: true
};
}
};
// 在表单验证器中使用自定义的验证规则
$(document).ready(function() {
$('#myForm').bootstrapValidator({
message: '输入无效',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
idcard: {
validators: {
notEmpty: {
message: '身份证号码不能为空'
},
idcard: { // 指定使用自定义的验证规则
minAge: 18 // 自定义的验证规则可以使用options参数传递任意数据
}
}
}
}
})
})
在上面的示例中，我们添加了一个自定义的表单验证规则"idcard"，并且在表单验证器中使用了该规则来验证身份证号码。在添加规则的过程中我们需要编写validate方法，该方法的参数包括validator（当前的表单验证器）、$field（需要验证的表单控件）、options（可选，可以传递任意数据，用于后面的验证过程）。
以上就是BootstrapValidator的简单使用方法和示例，希望能对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解 - Python技术站
微信扫一扫 
支付宝扫一扫 