以下是一个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});}}})