标签：模态 function obj 提交 form glyphicon modal name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框-form表单</title>
<!-- 自适配手机屏幕 initial-scale=1 支持缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax</title>
<!-- 引入 css -->
<link rel="stylesheet" type="text/css" href="/static/bootstrap3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/static/toastr/toastr.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css">
<link href="/static/bootstrap-formvalidation/dist/css/formValidation.min.css" rel="stylesheet">
<!-- 引入 js jquery必须先引入 -->
<script type="text/javascript" src="/static/jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/static/bootstrap3.4/js/bootstrap.min.js"></script>
<!-- 引入 bootstrap-table 2个 js -->
<script type="text/javascript" src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 引入 boot-box2个 js用作模态框 -->
<script type="text/javascript" src="/static/boot-box/bootbox.min.js"></script>
<script type="text/javascript" src="/static/boot-box/bootbox.locales.min.js"></script>
<!-- 引入toastr js -->
<script type="text/javascript" src="/static/toastr/toastr.min.js"></script>
<!-- 引入select js -->
<script type="text/javascript" src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script>
<!-- 引入form表单验证的 js -->
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/formValidation.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/language/zh_CN.js"></script>
<script>
$.fn.serializeJson = function () {
var obj = {};
var arr = this.serializeArray();
$.each(arr, function () {
if (obj[this.name]) {
if (!obj[this.name].push) {
// 判断有没有push方法，如果没有就变Array数组
obj[this.name] = [obj[this.name]];
}
obj[this.name].push(this.value || '');
} else {
obj[this.name] = this.value || '';
}
});
return obj;
};
</script>
</head>
<body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">新增项目</h4>
</div>
<div class="modal-body" >
<form class="form-horizontal" id="modal-form">
<div class="form-group">
<label for="project" class="col-md-3 control-label">项目名称:</label>
<div class="col-md-8">
<input type="text" class="form-control" name="project" id="project" placeholder="请输入项目名称">
</div>
</div>
<div class="form-group">
<label for="desc" class="col-md-3 control-label">项目描述:</label>
<div class="col-md-8">
<textarea class="form-control" name="desc" id="desc" placeholder="请输入项目名称"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button id="btn-default" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="btn-success" type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 触发模态框 按钮 -->
<button class="btn btn-success" id="btn_add" data-toggle="modal" data-target="#myModal">新增</button>
</div>
</body>
<script>
$(function validate_form() {
$('#modal-form').formValidation({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
project: {
message: '项目名称校验不通过',
validators: {
notEmpty: {message: '不能为空'},
}
},
desc: {
message: '项目描述校验不通过',
validators: {
notEmpty: {message: '不能为空'},
}
},
}
}) });
$(function () {
validate_form('#modal-form');
//点击确定按钮执行函数
$('#btn-success').click(function () {
var bv = $('#modal-form').data('formValidation');
bv.validate();
if (bv.isValid()) {
console.log('检验成功');
$.ajax({
url: '/api/form/',
type: 'post',
contentType: 'application/json',
data: JSON.stringify($('#modal-form').serializeJson()),
success: function (result, status, xhr) {
console.log("成功" + result +status + xhr);
$('#myModal').modal('hide');
$('#modal-form')[0].reset();
$('#modal-form').data('formValidation').destroy();
$('#modal-form').data('formValidation',null);
validate_form('#modal-form');
},
error: function (xhr, status, error) {
console.log("失败 " + error)
},
});
}
})
})
</script>
</html>
标签：模态,function,obj,提交,form,glyphicon,modal,name 来源： https://www.cnblogs.com/songxuelong/p/16360449.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。