问题：经常开发中用到modal对话框弹出验证以后第二次弹框时上次的验证效果依然有效，那就要想办法第二次弹框之前去掉上次的验证；
解决办法：
1.引入bootstrap的validator的校验js和css；
<linkrel="stylesheet"
href="<%=realPath%>/bootstrap/css/bootstrapValidator.css"/>
<scripttype="text/javascript"
src="<%=realPath%>/bootstrap/js/bootstrapValidator.js"></script>
2.body中定义的弹框modal
<body>
<!-- 弹框 -->
<divclass="modal fade"id="addDepModal"tabindex="-1"role="dialog"aria-labelledby="adddepLabel">
<divclass="modal-dialog"role="document">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button>
<h4class="text-center"style="font-size:16px;font-weight:bold;">添加部门</h4>
</div>
<formid="addDepForm"method="post">
<inputtype="hidden"id="bizDepId"name="bizDepId"/>
<inputtype="hidden"id="orgId"name="orgId"/>
<divclass="modal-body">
<divclass="form-group">
<label>部门名称:</label>
<inputtype="text"class="form-control"name="dep_name"id="dep_name"placeholder="请请输入部门名称"/>
</div>
</div>
</form>
<divclass="modal-footer">
<buttontype="button"id="addDepBtn"class="btn btn-primary">确定</button>
<buttontype="button"class="btn btn-default"data-dismiss="modal">取消</button>
</div>
</div>
</div>
<!--/添加弹框-->
</div>
</body>
3.通常情况下默认会在初始化中默认加载bootstrapvalidator验证代码
$(function(){bootstrapvalidator验证代码});
解决二次校验问题方法
1.定义bootstrap validator校验方法(校验部门名称是否重复)
//form验证规则
function formValidator(){
$("#addDepForm").bootstrapValidator({
message: '无效的值',
feedbackIcons: {
/* valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove', */
validating:'glyphicon glyphicon-refresh'
},
fields:{
dep_name: {
validators: {
notEmpty: {
message: '部门名不能为空'
},
remote: {
type: "post",
url: '<%=realPath%>/dep/validateBepExist',
data: function (validator) {
return {
name: validator.getFieldElements('dep_name').val(),
id:validator.getFieldElements('bizDepId').val()
};
},
message: '当前部门已被创建，请修改部门名称!',
delay: 300
}
}
}
}
});
}
2. 在js默认启动时调用启动校验$( function (){formValidator();});
3.在modal隐藏时移除校验重新添加校验
$("#addDepModal").on('hidden.bs.modal',function(e){
//移除上次的校验配置
$("#addDepForm").data('bootstrapValidator').destroy();
$('#addDepForm').data('bootstrapValidator',null);
//重新添加校验
formValidator();
});
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
