ExtJS 7.3 Modern版本无Vtype可用时，如何实现带可选负号的时长输入限制？

嘿，我完全理解你的痛点——Vtype在ExtJS 7.3 Modern里确实被移除了，而输入掩码又搞不定可选负号的场景。不过别担心，我们可以用自定义validator函数来完美替代，这也是Modern版推荐的校验方式，比Vtype更灵活。

核心思路 #

Modern版的所有表单字段都支持validator配置项，它本质是一个自定义函数，你可以在里面实现任意复杂的校验逻辑——正好能处理你这种"可选负号+固定时分格式"的需求。

具体实现步骤 #

1. 先写一个可复用的校验函数，支持开关"允许负号"的功能：

function validateTimeDuration(value, allowNegative) {
    // 空值的处理可以根据你的业务调整，这里默认允许空值
    if (Ext.isEmpty(value)) return true;
    
    // 根据配置生成对应的正则表达式
    const pattern = allowNegative ? /^-?\d{2}:\d{2}$/ : /^\d{2}:\d{2}$/;
    
    // 先校验格式是否匹配
    if (!pattern.test(value)) {
        return allowNegative 
            ? '请输入有效的时长格式，例如 08:00 或 -08:00' 
            : '请输入有效的时长格式，例如 08:00';
    }
    
    // 可选：额外校验时分的数值范围（比如小时0-23，分钟0-59）
    const cleanValue = value.replace('-', '');
    const [hours, minutes] = cleanValue.split(':').map(num => parseInt(num, 10));
    
    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
        return '小时需在0-23之间，分钟需在0-59之间';
    }
    
    return true;
}

2. 在表单字段里直接使用这个函数：

Ext.create('Ext.form.Panel', {
    items: [
        // 不允许负号的字段
        {
            xtype: 'textfield',
            label: '常规时长',
            validator: function(value) {
                return validateTimeDuration(value, false);
            }
        },
        // 允许负号的字段（通过特定设置启用）
        {
            xtype: 'textfield',
            label: '支持负时长',
            validator: function(value) {
                return validateTimeDuration(value, true);
            }
        }
    ],
    renderTo: Ext.getBody()
});

3. 进阶：封装成自定义字段（方便全局复用）
   如果你的项目里很多地方都需要这种校验，不如把它封装成一个自定义字段类型：

Ext.define('MyApp.field.TimeDuration', {
    extend: 'Ext.field.Text',
    xtype: 'timedurationfield',
    
    config: {
        // 新增配置项，控制是否允许负号，默认关闭
        allowNegative: false
    },
    
    validator: function(value) {
        const allowNegative = this.getAllowNegative();
        
        if (Ext.isEmpty(value)) return true;
        
        const pattern = allowNegative ? /^-?\d{2}:\d{2}$/ : /^\d{2}:\d{2}$/;
        if (!pattern.test(value)) {
            return allowNegative 
                ? '请输入有效的时长格式（如 08:00 或 -08:00）' 
                : '请输入有效的时长格式（如 08:00）';
        }
        
        const cleanValue = value.replace('-', '');
        const [hours, minutes] = cleanValue.split(':').map(num => parseInt(num, 10));
        
        if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
            return '小时范围0-23，分钟范围0-59';
        }
        
        return true;
    }
});

使用的时候就简单多了：

Ext.create('Ext.form.Panel', {
    items: [
        {
            xtype: 'timedurationfield',
            label: '标准时长',
            // 默认不允许负号，可省略
            allowNegative: false
        },
        {
            xtype: 'timedurationfield',
            label: '可负时长',
            allowNegative: true
        }
    ],
    renderTo: Ext.getBody()
});

为什么这个方案可行？ #

• 输入掩码的局限性在于它是"固定位置的占位规则"，没法处理开头可选的负号这种动态场景；而自定义validator完全不受这个限制，逻辑想怎么写就怎么写。
• Modern版虽然移除了Vtype，但validator配置其实是Vtype的底层逻辑暴露，功能上完全覆盖甚至超过Vtype，只是需要你自己写校验函数而已。

内容的提问来源于stack exchange，提问作者DGK