一、使用bootstrapvalidator做校验的时候会遇到这样一个场景以及带来的问题
1、当你修改某个记录的时候,记录的主键值是作为隐藏的表单项进行提交的。这里可能会遇到的问题就是,当你点击按钮触发表单的验证的时候,会提示没有validate这个属性或者堆栈深度达到最大值。这一些莫名其妙的问题,可以将我们的隐藏表单项包裹进 有form-group 这个class的div,如下:
<div class="form-group">
<input name="id" id="idKey" value="{{data.id}}" hidden>
</div>
2、表单某项验证不通过,于是你填写了正确的信息,但是表单的校验状态依旧没有清楚,导致无法提交。所以我们在进行当前验证之前,必须要清除上一次的验证状态,使用:
$('#formId').data('bootstrapValidator').resetForm();// 清除上一次的验证状态
$("#formId").data("bootstrapValidator").validate();//再进行本次验证
如果你想连带表单输入项都要清除,请使用:
$('#formId').data('bootstrapValidator').resetForm(true);//清除验证标记和表单数据
二、bootstrap 的模态框
1、缓存问题
编辑不同的记录,发现模态框的内容没有改变,也没有向后台请求信息,这里我们加入两个设置就好了,一个是每次请求都带上时间戳,保证每次请求都不同,第二个模态框关闭之后要清除其中的内容。如下:
function addmodel2(url) {
$("#modalId").modal({
remote: url+'?t='+new Date().getTime(),
backdrop: "static"
});
}
// 禁止modal缓存
$("#modalId").on("hidden.bs.modal", function () {
$(this).removeData("bs.modal");
});
2、一个页面多个模态框
一个页面多个模态框,可能会导致一个模态框叠加在另一个模态框上,会造成控制台报错。因此在js中加上如下代码可以减缓病情:
$.fn.modal.Constructor.prototype.enforceFocus =function(){};
三、bootstrapdatetimepicker
1、时间回显
如果我们只想回显时分秒,比如23:12:10。按照官网和百度的设置,一定会让你怀疑人生,要么造成后台报错,时间日期无法选择,要么表单无法提交,要么显示格式不是我们想要的。作为一个开发人员,我想说,我们真的好难,前端只是半吊子水平,但是要在全局变量和局部变量的猜测,各种变量来回寻找的过程。唔,所以我基本呵呵的。
好了,言归正传,如何做,才是重点。配置如下:
$("#form_datetime").datetimepicker({//设置格式 初始化时间日期表单项
language:'zh-CN',
format: "hh:ii:ss",
minView: '0',
autoclose: true,
todayBtn: true
});
var pushTime = "232323";// 示例时间 时分秒
var pushDate = new Date();
pushDate.setHours(pushTime.substr(0,2));//时
pushDate.setMinutes(pushTime.substr(2,4));//分
pushDate.setSeconds(pushTime.substr(4,6));//秒
$('#form_datetime').datetimepicker("setDate", pushDate);//设置时间 这一步最关键
这里不是吐槽百度和各种教程的无力,只是我们需要耐心和时间,有时候还需要一点运气。当你把各种组合都尝试一遍之后,也许答案就出来了。