ExtJS:验证整小时时间

ExtJS: Validate full hour time

本文关键字：小时 时间 验证 ExtJS      更新时间：2023-09-26

我正试图在ExtJS中创建一个带有时间字段的表单。此时间字段应仅接受整小时。

配置如下：

{
    name: 'validFromTime',
    fieldLabel: 'Valid From Time',
    xtype: 'timefield',
    increment: 60,
    allowBlank: false
}

60分钟的增量只会影响选取器UI，但不会影响验证。因此，我必须验证自己，以防止用户在时间字段中键入凌晨1:20之类的内容。

我试着用以下regex配置来做到这一点：

{
    name: 'validFromTime',
    fieldLabel: 'Valid From Time',
    xtype: 'timefield',
    increment: 60,
    regex: /^([1-9]|1[0-2]):(00)'s([A|P]M)$/,
    invalidText: 'Must be a full hour in format "1:00 AM/PM".',
    allowBlank: false
}

根据这个在线正则表达式检查器，这个正则表达式是正确的：https://regex101.com/r/uR9sM0/1

然而，ExtJS现在总是将此字段标记为无效，即使用户选择了正确的时间，如上午11:00

为了解决这个问题，我试着少配一点。我能做的最多的工作是：

/([1-9]|1[0-2]):00.*/

只要我添加任何其他部分，如^或''，它就不再起作用。你知道我缺少什么吗？

如注释中所述，时间字段的基本值是Date对象。因此，我建议验证Date对象而不是输入文本，这不仅是因为它比构建正则表达式容易得多，还因为时间字段可以识别除显示格式之外的一些其他输入模式(请参阅format和altFormats配置选项(，在使用正则表达式验证时，这些模式将被完全阻止。

您可以使用validator配置选项来提供一个用于自定义验证的函数，该函数将在字段的内置验证之外运行：

validator: function() {
    var value = this.getValue();
    if (Ext.isDate(value) && value.getMinutes() !== 0) {
        return 'Must be a full hour in format "1:00 AM/PM".';
    }
    return true;
}

请注意，对象类型的检查是强制性的，因为如果字段无法解析用户的输入，value将不是日期对象。

小提琴：https://fiddle.sencha.com/#fiddle/pu2

相关文章：