一、BootStrapValidator基础页面验证
// HTML页面，需要引用jquery.min.js、bootstrap.min.js、bootstrapValidator.min.js
// class="form-group 对应提示信息的显示位置
// class="form-control" 以name为主的需要验证指向
<form class="registerForm">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>Email address</label>
<input type="text" class="form-control" name="email" />
</div>
</form>// JS脚本、界面简洁、regex验证多样化
$(document).ready(function() {
$('.registerForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});引用官网地址：http://bootstrapvalidator.votintsev.ru/getting-started/
二、BootStrapValidator模态框（modal）验证
// modal样式、div可灵活处理（以下仅作参考）
<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="editModalLabel"></h4>
</div>
<div class="modal-body">
<!-- form start -->
<form class="form-horizontal" id="saveadmin_form"
name="form-horizontal">
<input type="hidden" id="adminid" />
<div class="box-body">
<dl class="dl-horizontal">
<div class="form-group">
<div class="col-sm-10">
<dt>管理员名</dt>
<dd>
<lable id="edit_show_adminname"></lable>
<input type="text" class="form-control" id="edit_adminName"
name="edit_adminName" data-bv-notempty="true"
name="edit_adminName">
</dd>
</div>
</div>
<div class="form-group" id="div_password">
<div class="col-sm-10">
<dt>密码</dt>
<dd>
<input type="text" class="form-control" name="edit_passwd"
id="edit_passwd">
</dd>
</div>
</div>
<div class="form-group" id="div_password1">
<div class="col-sm-10">
<dt>确认密码</dt>
<dd>
<input type="text" class="form-control" name="edit_passwd1"
id="edit_passwd1">
</dd>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<dt>显示名</dt>
<dd>
<input type="text" name="edit_displayName"
class="form-control" id="edit_displayName">
</dd>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<dt>邮箱</dt>
<dd>
<input type="text" data-bv-notempty="true" name="edit_Mail"
class="form-control" id="edit_Mail">
</dd>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<dt>备注</dt>
<dd>
<textarea class="form-control" name="edit_desc" rows="3"
id="edit_desc"></textarea>
</dd>
</div>
</div>
</dl>
</div>
<!-- /.box-body -->
<div class="modal-footer">
<button onclick="saveAdmin()" type="button" class="btn btn-success">
<i class="fa fa-check"></i> 保存
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-times"></i> 关闭
</button>
</div>
</form>
</div>
</div>
</div>
</div>// 初始化表单验证
$(document).ready(function() {
formValidator();
});
// form验证规则
function formValidator(){
$('#saveadmin_form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
//管理员名
edit_adminName: {
message: '管理员名验证失败',
validators: {
notEmpty: {
message: '管理员名不能为空'
},
stringLength: {
min: 5,
max: 64,
message: '管理员名长度必须在6到64位之间'
}
}
},
//密码
edit_passwd: {
message: '密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 5,
max: 64,
message: '密码长度在5到64之间'
}/* ,
identical: {
field: 'edit_passwd1',
message: '两次密码不相同'
} */
}
},
//密码确认
edit_passwd1: {
message: '密码确认验证失败',
validators: {
notEmpty: {
message: '密码确认不能为空'
},
identical: {
field: 'edit_passwd',
message: '两次密码不相同'
}
}
},
//显示名
edit_displayName: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '显示名不能为空'
},
stringLength: {
min: 5,
max: 128,
message: '显示名长度必须在6到18位之间'
}
}
},
//邮箱
edit_Mail: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '邮箱格式正确'
},
stringLength: {
max:256,
message: '邮箱长度必须小于256'
}
}
},
//备注
edit_desc: {
message: '备注验证失败',
validators: {
stringLength: {
max: 256,
message: '备注长度长度必须小于256'
}
}
},
}
});
}
// 提交保存
function saveAdmin(){
//开启验证
$('#saveadmin_form').data('bootstrapValidator').validate();
if(!$('#saveadmin_form').data('bootstrapValidator').isValid()){
return ;
}
//表单提交 ...
}
// Modal验证销毁重构，防止第二次打开modal时显示上一次的验证痕迹
$('#editModal').on('hidden.bs.modal', function() {
$('#saveadmin_form').data('bootstrapValidator', null);
formValidator();
});