`
chen2991101
  • 浏览: 37743 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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'
}

 这样就行了

0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics