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的默認(rèn)配置
excluded:[":disabled"],//關(guān)鍵配置，表示只對于禁用域不進(jì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)文章
全面解析Android應(yīng)用開發(fā)中Activity類的用法
這篇文章主要介紹了Android應(yīng)用開發(fā)中Activity類的用法,包括Activity間的數(shù)據(jù)傳遞以及Activity的創(chuàng)建方式等,需要的朋友可以參考下2016-02-02
Android?ContentObserver?監(jiān)聽短信思路詳解
ContentObserver允許在Android中監(jiān)控特定數(shù)據(jù)的變化,可用于短信等應(yīng)用的數(shù)據(jù)監(jiān)聽,開發(fā)者可通過繼承ContentObserver并實現(xiàn)onChange方法來定義當(dāng)目標(biāo)內(nèi)容變化時的響應(yīng)行為,感興趣的朋友一起看看吧2024-09-09
這篇文章主要給大家介紹了關(guān)于Flutter上線項目實戰(zhàn)記錄之路由篇的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
使用genymotion訪問本地上Tomcat上數(shù)據(jù)的方法
下面小編就為大家?guī)硪黄褂胓enymotion訪問本地上Tomcat上數(shù)據(jù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了Android仿qq分組管理的第三方庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
Android Studio 3.1.3升級至3.6.1后舊項目的兼容操作方法
這篇文章主要介紹了Android Studio 3.1.3升級至3.6.1后舊項目的兼容操作方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
Android獲取內(nèi)置sdcard跟外置sdcard路徑
這篇文章主要介紹了Android獲取內(nèi)置sdcard跟外置sdcard路徑的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
Android自定義ViewPagerIndicator實現(xiàn)炫酷導(dǎo)航欄指示器（ViewPager+Fragment）
這篇文章主要為大家詳細(xì)介紹了Android自定義ViewPagerIndicator實現(xiàn)炫酷導(dǎo)航欄指示器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
Android 判斷網(wǎng)絡(luò)狀態(tài)實例詳解
這篇文章主要介紹了Android 判斷網(wǎng)絡(luò)狀態(tài)實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android 是一款基于 Linux 內(nèi)核，面向移動終端的操作系統(tǒng)。為適應(yīng)其作為移動平臺操作系統(tǒng)的特殊需要，谷歌對其做了特別的設(shè)計與優(yōu)化，使應(yīng)用程序關(guān)閉但不退出，并由操作系統(tǒng)進(jìn)行進(jìn)程的回收管理2016-01-01