`
chen2991101
  • 浏览: 38540 次
  • 性别: 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
分享到:
评论

相关推荐

    extjs 自定义验证

    extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证

    extjs4自定义深蓝色主题

    "extjs4自定义深蓝色主题"是针对ExtJS4框架的一个特定主题设计,旨在为应用程序提供一种专业且深沉的视觉体验。 这个主题继承自ExtJS4的经典(Classic)主题,这意味着它在保持原有组件结构的基础上,对颜色、字体...

    extjs vtype 扩展正则

    Extjs表单VTYPE扩展,方便验证!

    ExtJS如何自定义图片按钮组件

    1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...

    Extjs4.2自定义ComboTree

    Extjs4.2自定义ComboTree

    ExtJs自定义消息框

    ### ExtJs自定义消息框详解 #### 一、引言 在Web开发中,与用户的交互体验至关重要。作为一款优秀的JavaScript框架,ExtJs提供了多种工具和组件帮助开发者快速构建高质量的用户界面。其中,消息框作为一种常见的...

    Extjs验证表单 Extjs验证表单

    本文将深入探讨Extjs中的表单验证机制,包括错误信息提示方式、内置验证属性、Vtype验证以及自定义验证方法。 #### 二、Extjs 错误信息提示方式 在进行任何形式的验证之前,首先需要配置错误信息的提示方式。Extjs...

    ExtJs6.2中包含文本及时间选择框的自定义查询控件的解决方案

    ### ExtJs 6.2 中包含文本及时间选择框的自定义查询控件解决方案 在ExtJs 6.2框架中实现一个具有文本输入与时间选择功能的自定义查询控件是一个常见但实用的需求。本篇文章将详细介绍如何设计并实现这样一个控件,...

    extjs 常用vtype 代码

    extjs 常用vtype 代码 Ext.VTyps常用vtype大全!

    Extjs6 日期时间控件

    在EXTJS6中,日期时间控件是一种强大的用户界面组件,它将传统的日期选择器与时间选择器结合在一起,提供了一种便捷的方式来输入和编辑日期和时间数据。这个控件在许多应用程序中都非常实用,特别是在那些需要精确...

    extjs表单验证特殊字符

    每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的验证,我们通常会关心如何限制或排除某些特定字符。 1. **基本验证类型(vtype)**...

    extjs时间控件精确秒

    我们还可以监听`change`事件来执行自定义验证逻辑。例如,确保选择的时间不早于当前时间: ```javascript Ext.create('Ext.form.field.Time', { // ... listeners: { change: function(field, newValue) { ...

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...

    EXTJS 自定义combo控件

    xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法

    extjs用户自定义换肤并保存

    在EXTJS这个强大的JavaScript框架中,用户自定义换肤功能是一项非常吸引人的特性。EXTJS允许用户根据个人喜好调整界面的色彩和样式,为应用程序提供更个性化的用户体验。这一功能的实现基于EXTJS的皮肤机制,它使得...

    ExtJs自定义分页控件----PM3PagingToolbar.js

    在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid ...

    自定义高级查询Extjs

    在这个场景中,"自定义高级查询Extjs"指的是利用Ext JS框架来构建这样的功能。Ext JS是一个流行的JavaScript库,用于创建富客户端应用程序,特别是与数据展示和操作相关的Web应用。 1. **Ext JS简介** - Ext JS...

    extjs日期+时间控件

    4. **日期时间格式化**:在ExtJS中,日期和时间的格式化使用`Ext.util.Format.date`函数,可以定制如"YYYY-MM-DD HH:mm:ss"这样的输出格式。在日期时间控件中,可以通过`format`配置项来设置显示和解析的日期时间...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

Global site tag (gtag.js) - Google Analytics