溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關在BootStrap項目中使用Validator與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"); 上述就是小編為大家分享的在BootStrap項目中使用Validator與My97實現一個日期校驗功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
