//css样式
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrapValidator.min.css" type="text/css" rel="stylesheet" />
//js
<script type="text/javascript" src="jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrapValidator.min.js"></script>
<div class="modal fade" id="mymodal"> // 模态框
<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" style="font-family: cursive;">新建相册</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="modalform"
autocomplete="off">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="field-3" class="control-label">添加相册名称</label> <input
type="text" class="form-control" id="uploadalbum"
name="uploadalbum" placeholder="相册名称">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="field-4" class="control-label">权限</label> <select
class="form-control" id="power" name="power">
<option value="0">公开</option>
<option value="1">仅自己可见</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-info" onclick="savealbum()">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$('#modalform').bootstrapValidator({
message : '输入值不合法',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
uploadalbum : {
message : '相册名称不能为空',
validators : {
notEmpty : {
message : '相册名称不能为空'
},
stringLength : {
min : 1,
max : 18,
message : '请输入1到18个字符'
},
regexp : {
regexp : /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
message : '相册名称只能由字母、数字、点、下划线和汉字组成 '
}
}
}
}
});
})
function savealbum() {
var mymodal = $('#mymodal');
var bootstrapValidator = $("#modalform").data("bootstrapValidator");
bootstrapValidator.validate();
if (bootstrapValidator.isValid()) { // 模态框是否通过验证
mymodal.modal('hide');
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/673e6ea7d7e00e1e12b93fc9dc4e3895.png)