BootStrapValidator与My97日期校验的实例代码

首先my97的api中有自定义事件中有 onpicking 和 onpicked 事件 、onclearing 和 oncleared 事件、年月日时分秒的 changing和changed。

   我的html页面中需要展示的日期样子是:

<label class="col-xs-2 control-label" for="constructionplanadd_planstarttime">开始时间:</label> 
          <div class="col-xs-4"> 
            <input class="form-control input-sm wdate" id="constructionplanadd_planstarttime" name="planstarttime" type="text" placeholder="请选择开始时间" onfocus="wdatepicker({maxdate:'#f{$dp.$d(\'constructionplanadd_planendtime\');}',datefmt:'yyyy-mm-dd',readonly:true})"/> 
          </div> 
          <label class="col-xs-2 control-label" for="constructionplanadd_planendtime">结束日期:</label> 
          <div class="col-xs-4"> 
            <input class="form-control input-sm wdate" id="constructionplanadd_planendtime" type="text" name="planendtime" placeholder="请输入结束时间" onfocus="wdatepicker({mindate:'#f{$dp.$d(\'constructionplanadd_planstarttime\');}',datefmt:'yyyy-mm-dd',readonly:true})"/> 
          </div> 

   我需要的效果是，当选择完日期后，可以实现bootstrapvalidator的自动校验，熟读my97的api后我发现这个onpicked 事件对我有用，于是我添加了onpicked 事件。代码变成这样:

<label class="col-xs-2 control-label" for="constructionplanadd_planstarttime">开始时间:</label> 
          <div class="col-xs-4"> 
            <input class="form-control input-sm wdate" id="constructionplanadd_planstarttime" name="planstarttime" type="text" placeholder="请选择开始时间" onfocus="wdatepicker({maxdate:'#f{$dp.$d(\'constructionplanadd_planendtime\');}',datefmt:'yyyy-mm-dd',readonly:true,onpicked:checkplanstarttime(this)})"/> 
          </div> 
          <label class="col-xs-2 control-label" for="constructionplanadd_planendtime">结束日期:</label> 
          <div class="col-xs-4"> 
            <input class="form-control input-sm wdate" id="constructionplanadd_planendtime" type="text" name="planendtime" placeholder="请输入结束时间" onfocus="wdatepicker({mindate:'#f{$dp.$d(\'constructionplanadd_planstarttime\');}',datefmt:'yyyy-mm-dd',readonly:true,onpicked:checkplanendtime(this)})"/> 
          </div> 

   所以此时我们需要在js中定义函数:

function checkplanstarttime(obj) { 
  if(obj.value!=null && obj.value!="" && obj.value!=undefined){ 
    $("#constructionplanadd").data("bootstrapvalidator").updatestatus("planstarttime","not_validated", null).validatefield("planstarttime"); 
  } 
} 

  于此同时，需要在页面提交事件加入日期的再次校验 

$('#constructionplanadd').bootstrapvalidator({ 
    message: '您输入的值不合法!', 
    feedbackicons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
    }, 
    //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapvalidator的默认配置 
    excluded:[":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证 
    fields: { 

    planstarttime: { 
      message : "计划开始日期必须输入", 
      validators : { 
        notempty : { 
          message : "计划开始日期不能为空" 
        }, 
        date : { 
          format : "yyyy-mm-dd", 
          message : "计划开始日期格式不正确" 
        } 
      } 
    }, 
    planendtime: { 
      message : "计划结束日期必须输入", 
      validators : { 
        notempty : { 
          message : "计划结束日期不能为空" 
        }, 
        date : { 
          format : "yyyy-mm-dd", 
          message : "计划结束日期格式不正确" 
        } 
      } 
    } 
  }, 
  submithandler: function (validator, form, submitbutton) { 
    ajaxsubmit(); 
  } 
}); 

这样既可完成bootstrapvalidator的与my97合体的日期校验。

    值得注意的是bootstrapvalidator的额外添加数据校验

$("#constructionplanadd").data("bootstrapvalidator").updatestatus("planendtime","not_validated", null).validatefield("planendtime"); 

以上所述是小编给大家介绍的bootstrapvalidator与my97日期校验的实例代码，希望对大家有所帮助