欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

BootStrapValidator與My97日期校驗的實例代碼

 更新時間：2017年01月22日 15:05:14   作者：wangwo1991  
這篇文章給大家介紹了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">結(jié)束日期:</label> 
          <div class="col-xs-4"> 
            <input class="form-control input-sm Wdate" id="ConstructionPlanAdd_planEndTime" type="text" name="planEndTime" placeholder="請輸入結(jié)束時間" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'ConstructionPlanAdd_planStartTime\');}',dateFmt:'yyyy-MM-dd',readOnly:true})"/> 
          </div>

   我需要的效果是，當(dāng)選擇完日期后，可以實現(xiàn)bootstrapValidator的自動校驗，熟讀my97的API后我發(fā)現(xiàn)這個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">結(jié)束日期:</label> 
          <div class="col-xs-4"> 
            <input class="form-control input-sm Wdate" id="ConstructionPlanAdd_planEndTime" type="text" name="planEndTime" placeholder="請輸入結(jié)束時間" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'ConstructionPlanAdd_planStartTime\');}',dateFmt:'yyyy-MM-dd',readOnly:true,onpicked:checkPlanEndTime(this)})"/> 
          </div>

   所以此時我們需要在js中定義函數(shù):

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"],//關(guān)鍵配置，表示只對于禁用域不進行驗證，其他的表單元素都要驗證 
    fields: { 

    planStartTime: { 
      message : "計劃開始日期必須輸入", 
      validators : { 
        notEmpty : { 
          message : "計劃開始日期不能為空" 
        }, 
        date : { 
          format : "yyyy-MM-dd", 
          message : "計劃開始日期格式不正確" 
        } 
      } 
    }, 
    planEndTime: { 
      message : "計劃結(jié)束日期必須輸入", 
      validators : { 
        notEmpty : { 
          message : "計劃結(jié)束日期不能為空" 
        }, 
        date : { 
          format : "yyyy-MM-dd", 
          message : "計劃結(jié)束日期格式不正確" 
        } 
      } 
    } 
  }, 
  submitHandler: function (validator, form, submitButton) { 
    ajaxSubmit(); 
  } 
});

這樣既可完成bootstrapValidator的與my97合體的日期校驗。

    值得注意的是bootstrapValidator的額外添加數(shù)據(jù)校驗

$("#ConstructionPlanAdd").data("bootstrapValidator").updateStatus("planEndTime","NOT_VALIDATED", null).validateField("planEndTime");

以上所述是小編給大家介紹的BootStrapValidator與My97日期校驗的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論