以下是一个BootStrap modal弹框
<div class="modal fade" id="colorModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog" style="width:700px">
<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="myModalLabel">
选择颜色
</h4>
</div>
<form id="add" class="form-horizontal" role="form" method="post"
action="">
<div class="modal-body">
<div class="form-group">
<label for="colorCodeSelect" class="col-sm-2 control-label">
<span class="r_ed">*</span>颜色:
</label>
<div class="col-sm-5">
<select class="form-control" id="colorCodeSelect" name="colorCode" datatype="colorCode">
<option value="-1">----请选择颜色----</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div>
modal 取消或者关闭 事件监听
// 关闭重置
$('#colorModal').on('hidden.bs.modal', function () {
# 可以设置下拉框为初始值
$("#colorCodeSelect").val(-1);
# 清空表单校验信息
$("#add").Validform().resetForm();
$(".Validform_checktip").html("");
});
使用Validform校验表单
$("#add").Validform({
tiptype: 4,
ajaxPost: true,
postonce: true,
datatype: {
"colorCode": function (gets, obj, curform, regxp) {
if (gets == '-1') {
return "请选择具体颜色!";
} else {
var params = {
"colorCode": $("#colorCodeSelect").val()
};
var result;
$.ajax({
url: "",
type: "POST",
dataType: 'json',
data: params,
async: false,
success: function (data) {
}
});
return result;
}
},
},
callback: function (d) {
if (d.code == 0) {
parent.layer.alert('添加成功', {icon: 1})
window.location.reload();
} else {
layer.open({
title: "信息",
offset: '200px',
content: d.msg
});
}
}
})