效果为：
image.png
目录结构为：
image.png
需要的js、css和img在下面都有说明，耐心点读！
需要的js文件: jquery.min.js，bootstrapValidator.min.js，bootstrap-validator-default.js（自定义的一个默认配置文件，是个人写的，非官方文件）
前两个文件cdn上都有，bootstrap-validator-default.js内容如下：
/*默认规则 start*/
//ip格式
$.fn.bootstrapValidator.validators.ip = {
//message: "ip格式不正确"
validate: function(validator, $field, options) {
var value = $field.val(),
ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;
if (value === '') {
return true;
}
return ipReg.test(value);
}
};
//password格式
$.fn.bootstrapValidator.validators.pw = {
//message: "必须包含数字、英文字母、特殊字符"
validate: function(validator, $field, options) {
var value = $field.val(),
ipReg = /.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./;
if (typeof value != 'string' || !ipReg.test(value)) {
return false;
}
return true;
}
};
//不允许有空格
$.fn.bootstrapValidator.validators.noSpace = {
//message: "必须包含数字、英文字母、特殊字符"
validate: function(validator, $field, options) {
var value = $field.val();
if (typeof value != 'string' || value.indexOf(' ') > -1) {
return false;
}
return true;
}
};
//网关格式
$.fn.bootstrapValidator.validators.mask = {
//message: "网关不可达"
validate: function(validator, $field, options) {
var ipArr = $field.parent().parent().find('input[name="ip"]').val().split('.'),
gatewayArr = $field.parent().parent().find('input[name="gateway"]').val().split('.'),
value = $field.val(),
netmaskArr = value.split('.'),
len = 4,
i = 0;
if (ipArr.length !== len || gatewayArr.length !== len || netmaskArr.length !== len) {
return false;
}
for (; i < len; i++) {
if ((ipArr[i] & netmaskArr[i]) !== (gatewayArr[i] & netmaskArr[i])) {
return false;
}
}
return true;
}
};
//邮箱 表单验证规则
$.fn.bootstrapValidator.validators.mail = {
//message: "邮箱格式不正确"
validate: function(validator, $field, options) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/,
value = $field.val();
return mail.test(value);
}
};
//电话验证规则
$.fn.bootstrapValidator.validators.phone = {
//message: "0371-68787027"
validate: function(validator, $field, options) {
var phone = /^0\d{2,3}-\d{7,8}$/,
value = $field.val();
return phone.test(value);
}
};
//区号验证规则
$.fn.bootstrapValidator.validators.ac = {
//message: "区号如：010或0371"
validate: function(validator, $field, options) {
var ac = /^0\d{2,3}$/,
value = $field.val();
return ac.test(value);
}
};
//无区号电话验证规则
$.fn.bootstrapValidator.validators.noactel = {
//message: "电话格式如：68787027"
validate: function(validator, $field, options) {
var noactel = /^\d{7,8}$/,
value = $field.val();
return noactel.test(value);
}
};
/*默认规则 end*/
$.fn.extend({
initBV: function(config) { //初始化函数
if (this.length == 0 || this[0].tagName !== 'FORM') {
return false;
}
var $form = this.eq(0),
$inputs = $form.find('input'),
$errors = $form.find('.errors'),
$itemBtn = $form.find('.item-btn');
//让ul.errors中显示验证项
function initTips(fields) {
var validator, notEmpty, $errField;
fields = fields.fields || fields;
if (!fields) return false;
for (var field in fields) {
$errField = $form.find('#errors-' + field);
$errField.hide().find('li').remove();
validators = fields[field].validators;
notEmpty = false;
for (var vali in validators) {
$('')
.addClass('text-left')
.attr('data-field', field)
.attr('data-vali', vali)
.html(validators[vali].message)
.appendTo($errField);
if (vali == 'notEmpty') {
notEmpty = true;
}
}
if (notEmpty) {
$errField.data('status', 'error');
} else {
$errField.data('status', 'success');
}
}
return false;
}
initTips(config.fields);
$form.bootstrapValidator(config)
.on('success.form.bv', function(e, data) { //点击提交之后
// Prevent form submission
e.preventDefault();
return false;
}).on('success.field.bv', function(e, data) {
var removeClass, successClass;
if (data.element[0].value) {
//验证成功
console.log('real success')
removeClass = 'error';
addClass = 'success';
} else {
//验证的其实是''(空字符串)，但也被算是success事件
console.log('not success');
removeClass = 'error success';
addClass = 'normal';
}
$errors.hide();
$form.find('#errors-' + data.field).show().data('status', 'success').find('li').each(function(idx, item) {
$(item).removeClass(removeClass).addClass(addClass);
});
}).on('error.field.bv', function(e, data) {
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
// Get the messages of field
var field = data.field;
var messages = data.bv.getMessages(data.element);
// Remove the field messages if they're already available
$errors.hide();
$form.find('#errors-' + data.field).show().data('status', 'error').find('li').each(function(idx, item) {
item = $(item);
if (messages.indexOf(item.text().replace('&', '&')) > -1 || config.fields[data.field].validators.notEmpty && messages.indexOf(config.fields[data.field].validators.notEmpty.message) > -1) {
item.removeClass('success').addClass('error');
} else {
item.removeClass('error').addClass('success');
}
});
// Hide the default message
// $field.data('bv.messages') returns the default element containing the messages
data.element
.data('bv.messages')
.find('.help-block[data-bv-for="' + data.field + '"]')
.hide();
});
$inputs.blur(function(e) {
$errors.hide();
})
$inputs.focus(function(e) {
$errors.hide();
$(this).trigger('input');
$(this).parent().find('.totalTip').hide();
$form.find('#errors-' + this.name).show();
})
$itemBtn.click(function(e) {
e.preventDefault();
$form.find('input').trigger('input');
$('.errors').hide();
return false;
});
},
valiFields: function(fields) { //验证fields是否验证通过，未通过则提示信息
var status = true,
fieldStatus, $errField, $errFiePar, $totalTip;
fields = fields.fields || fields;
if (!fields) return false;
for (var field in fields) {
$errField = $('#errors-' + field);
fieldStatus = $errField.data('status');
if (fieldStatus == 'error') {
$errFiePar = $errField.parent(),
$totalTip = $errFiePar.find('.totalTip');
if ($totalTip.length) {
$totalTip.show();
} else {
$errFiePar.append('' + fields[field].message + '');
}
}
status = status && fieldStatus == 'success';
}
return status;
}
});
需要的css文件: bootstrap-validator-my.css（自定义的一个默认配置文件，是个人写的，非官方文件）
bootstrap-validator-my.css内容如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input,
button {
outline: none;
}
ul {
list-style: none;
}
/*字体样式*/
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.text-center,
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
/*位置样式*/
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
/*浮动相关*/
.float,
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.pageWrap {
height: auto;
min-height: 100%;
}
/*panel start*/
.panel {
border: 1px solid #6AC7DC;
border-radius: 4px;
background: #fff;
}
.panel>div:first-child {
border-bottom: 1px solid #6AC7DC;
height: 35px;
line-height: 35px;
border-radius: 4px;
}
.panel .panel-head {
padding: 0 20px;
position: relative;
}
.panel .panel-head .panel-title {
font-weight: bold;
}
.panel .panel-head .panel-btns {
position: absolute;
right: 20px;
}
.panel .panel-head .panel-btns span {
border-radius: 5px;
color: #fff;
padding: 2px 8px;
}
.panel .panel-head .panel-btns span:hover {
cursor: pointer;
}
.panel .panel-head .panel-btns .panel-btn-add {
background: #3686D1;
}
.panel .panel-body {
padding: 20px;
}
.panel .panel-body .panel-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.panel .panel-body .panel-table td,
.panel .panel-body .panel-table th {
border: 1px solid #E0E0E0;
font-size: 14px;
padding: 0 8px;
font-style: normal;
}
.panel .panel-body .panel-table th {
height: 33px;
line-height: 33px;
}
.panel .panel-body .panel-table td {
height: 28px;
line-height: 28px;
}
/*panel end*/
/*所有表单元素样式 start*/
.form {
display: flex;
justify-content: center;
padding: 20px;
}
.form .item-txt,
.form .item-sel {
width: 300px;
height: 30px;
line-height: 30px;
border: 1px solid #CCCCCC;
padding: 0 10px;
}
.form .item-dis {
background: #E3E3E3;
color: #999999;
}
.form .item-dis:hover {
cursor: not-allowed;
}
.form .item {
font-size: 0;
position: relative;
margin-bottom: 15px;
}
.form .totalTip {
position: absolute;
left: 386px;
top: 0;
width: 235px;
height: 30px;
line-height: 30px;
color: red;
}
.form .errors {
width: 235px;
position: absolute;
left: 386px;
top: 0;
border: 1px solid #ddd;
box-shadow: 1px 1px 1px #efefef;
background: #f9f9f9;
padding: 5px 10px;
z-index: 100;
}
.form .errors li {
line-height: 20px;
padding-left: 18px;
font-size: 12px;
color: #666;
font-family: Tahoma,Helvetica,"Microsoft Yahei","微软雅黑",Arial,STHeiti;
background: url(reg_icons.png) no-repeat -86px -112px;
}
.form .errors .arrow {
position: absolute;
top: 8px;
left: -6px;
height: 0px;
width: 0px;
border-top: 6px solid transparent;
border-right: 6px solid #ddd;
border-bottom: 6px solid transparent;
}
.form .errors .arrow:after {
content: '';
position: absolute;
top: -5px;
left: 1px;
border-top: 5px solid transparent;
border-right: 5px solid #f9f9f9;
border-bottom: 5px solid transparent;
}
.form .errors li.normal {
background-position: -86px -112px;
}
.form .errors li.success {
background-position: -86px -128px;
}
.form .errors li.error {
background-position: -86px -144px;
color: red;
}
.form .item * {
font-size: 14px;
}
.form .item .item-label {
display: inline-block;
}
.form .item .item-btn {
height: 30px;
width: 300px;
line-height: 30px;
display: inline-block;
background: #3686D1;
color: #fff;
font-weight: bold;
text-align: center;
}
.form .item .item-btn:hover {
cursor: pointer;
}
.form .error-cont {
color: gray;
display: inline-block;
text-align: left;
font-size: 12px;
height: 15px;
position: relative;
white-space: nowrap;
}
.form .error-cont .icon {
position: absolute;
top: 1px;
}
.form .error-cont .tip {
position: absolute;
left: 20px;
font-size: 12px;
}
.form .redtip {
color: red;
font-weight: bold;
display: inline-block;
height: 30px;
line-height: 30px;
}
/*所有表单元素样式 end*/
reg_icons.png
bootstrap-validator-my