項目中需要開始時間和結束時間的驗證。因爲需求涉及到兩個時間,所以要有驗證開始時間不能大於結束時間。之前對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' }
這樣就行了