首先my97的API中有自定義事件中有 onpicking 和 onpicked 事件 、onclearing 和 oncleared 事件、年月日時(shí)分秒的 changing和changed。
我的html頁面中需要展示的日期樣子是:
<label class="col-xs-2 control-label" for="ConstructionPlanAdd_planStartTime">開始時(shí)間:</label> <div class="col-xs-4"> <input class="form-control input-sm Wdate" id="ConstructionPlanAdd_planStartTime" name="planStartTime" type="text" placeholder="請選擇開始時(shí)間" 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é)束時(shí)間" onFocus="WdatePicker({minDate:'#F{$dp.$D(/'ConstructionPlanAdd_planStartTime/');}',dateFmt:'yyyy-MM-dd',readOnly:true})"/> </div> 我需要的效果是，當(dāng)選擇完日期后，可以實(shí)現(xiàn)bootstrapValidator的自動(dòng)校驗(yàn)，熟讀my97的API后我發(fā)現(xiàn)這個(gè)onpicked 事件對我有用，于是我添加了onpicked 事件。代碼變成這樣:
<label class="col-xs-2 control-label" for="ConstructionPlanAdd_planStartTime">開始時(shí)間:</label> <div class="col-xs-4"> <input class="form-control input-sm Wdate" id="ConstructionPlanAdd_planStartTime" name="planStartTime" type="text" placeholder="請選擇開始時(shí)間" 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é)束時(shí)間" onFocus="WdatePicker({minDate:'#F{$dp.$D(/'ConstructionPlanAdd_planStartTime/');}',dateFmt:'yyyy-MM-dd',readOnly:true,onpicked:checkPlanEndTime(this)})"/> </div> 所以此時(shí)我們需要在js中定義函數(shù):
function checkPlanStartTime(obj) { if(obj.value!=null && obj.value!="" && obj.value!=undefined){ $("#ConstructionPlanAdd").data("bootstrapValidator").updateStatus("planStartTime","NOT_VALIDATED", null).validateField("planStartTime"); } } 于此同時(shí)，需要在頁面提交事件加入日期的再次校驗(yàn)
$('#ConstructionPlanAdd').bootstrapValidator({ message: '您輸入的值不合法!', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, //excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默認(rèn)配置 excluded:[":disabled"],//關(guān)鍵配置，表示只對于禁用域不進(jìn)行驗(yàn)證，其他的表單元素都要驗(yàn)證 fields: { planStartTime: { message : "計(jì)劃開始日期必須輸入", validators : { notEmpty : { message : "計(jì)劃開始日期不能為空" }, date : { format : "yyyy-MM-dd", message : "計(jì)劃開始日期格式不正確" } } }, planEndTime: { message : "計(jì)劃結(jié)束日期必須輸入", validators : { notEmpty : { message : "計(jì)劃結(jié)束日期不能為空" }, date : { format : "yyyy-MM-dd", message : "計(jì)劃結(jié)束日期格式不正確" } } } }, submitHandler: function (validator, form, submitButton) { ajaxSubmit(); } }); 這樣既可完成bootstrapValidator的與my97合體的日期校驗(yàn)。
值得注意的是bootstrapValidator的額外添加數(shù)據(jù)校驗(yàn)
$("#ConstructionPlanAdd").data("bootstrapValidator").updateStatus("planEndTime","NOT_VALIDATED", null).validateField("planEndTime"); 以上所述是小編給大家介紹的BootStrapValidator與My97日期校驗(yàn)的實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
