extjs4自定義vtype驗證開始時間不能大於結束時間

項目中需要開始時間和結束時間的驗證。因爲需求涉及到兩個時間,所以要有驗證開始時間不能大於結束時間。之前對extjs4瞭解不夠深入,所以這個驗證是放在後臺來完成,然後在前臺彈出一個alert來提示用戶“開始時間不能大於結束時間”。這樣做依然用戶體驗不好,不能輸入完後馬上就提示用戶,而且還會發送沒必要的請求增加服務器負擔。多個字段的驗證就能很好的解決這個問題。但是實現也要比單個字段的驗證要複雜些,除了要自定義驗證外,還要自定義屬性用以配置兩個互相關聯的日期字段:

Ext.apply(Ext.form.field.VTypes, {
                            // 自己拓展比較時間的vtype
                            dateRange : function(val, field) {
                                var beginDate = null, // 開始時間
                                beginDateCmp = null, // 開始日期組件
                                endDate = null, // 結束日期
                                endDateCmp = null, // 結束日期組件
                                validStatus = true;// 驗證結果
                                if (field.dateRange) {
                                    // 獲取開始時間
                                    if (!Ext.isEmpty(field.dateRange.begin)) {
                                        beginDateCmp = Ext.getCmp(field.dateRange.begin);
                                        beginDate = beginDateCmp.getValue();
                                    }
                                    // 獲取結束時間
                                    if (!Ext.isEmpty(field.dateRange.end)) {
                                        endDateCmp = Ext.getCmp(field.dateRange.end);
                                        endDate = endDateCmp.getValue();
                                    }
                                }
                                // 如果開始日期或者結束日期有一個爲空則驗證通過
                                if (!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)) {
                                    validStatus = beginDate <= endDate;
                                }
                                return validStatus;
                            },
                            dateRangeText : '開始時間不能大於結束時間!'
                        })

 在控件中配置也有點不一樣,除了要配置vtype屬性,還要配置自定義的屬性:

dateRange : { 
begin:'createSetAdWin-startT',
end : 'createSetAdWin-endT'
}

 這樣就行了

發佈了15 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章