2020-01-08/bootstrap 的验证、时间选择器、模

一、使用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);//设置时间  这一步最关键

这里不是吐槽百度和各种教程的无力，只是我们需要耐心和时间，有时候还需要一点运气。当你把各种组合都尝试一遍之后，也许答案就出来了。