ExtJs NumberField 验证

Posted 2023-02-26

【中文标题】ExtJs NumberField 验证

【英文标题】：ExtJs NumberField Validation

【发布时间】：2011-07-14 20:42:31

【问题描述】：

我有一个像下面这样的复合元素

    xtype: 'compositefield'
    ,hideLabel: true
    ,labelWidth: 100
    ,items: [
        
            xtype: 'displayfield'
            ,width: 160
            ,value: 'field 1'
        ,
        
            xtype: 'checkbox',
            name: 'field1name',
            id: 'field1id',
            checked: true
        ,
        
            xtype: 'displayfield'
            ,width: 20
            ,value: 'Ft '
        ,
        
            xtype: 'numberfield',
            width: 50,
            allowNegative: false,
            value: 50,
            name: 'numberfield'     
        
    ]

如何对xtype:'numberField' 进行自定义验证？

我不想将配置选项 allowBlank:false 放在，而是想在其他地方验证它，但在字段的一侧显示一条错误消息。

谁能给我解释一下怎么做？

下面是我的做法，它在firebug中产生“无效方法”错误：

Ext.get('numberfield').setActiveError('this Field Cannot be Blank');

和

Ext.get('numberfield').markInvalid('this Field Cannot be Blank');

【问题讨论】：

如果你只想验证里面是否有值，你应该使用allowBlank: false。如果要自定义消息，只需要指定blankText: 'custom text'。对于真正的自定义验证，有 validator 配置。

【参考方案1】：

我认为最简单的方法是使用验证器功能：

    xtype: 'compositefield'
    ,hideLabel: true
    ,labelWidth: 100
    ,monitorValid: true
    ,items: [
        [...]
        
            xtype: 'numberfield',
            width: 50,
            allowNegative: false,
            value: 50,
            name: 'numberfield',
            validator: function(val) 
                if (!Ext.isEmpty(val)) 
                    return true;
                
                else 
                    return "Value cannot be empty";
                
            
        
    ]

【讨论】：

您能告诉我如何运行该验证器吗？谢谢。我想根据表单中其他一些字段的选择来验证这个字段。所以这个验证器会在我提交表单后立即运行。

不需要显式调用，在FormPanel配置中使用monitorValid: true会自动调用。

我编辑了答案，向您展示了您需要添加的地方。

ok 正如您在我的代码中看到的，我有一个复选框，如果选中该复选框，则数字字段不应为空，否则可以为空。我基本上希望根据复选框验证数字字段。谢谢...

哦，我明白了。然后尝试使用您的方法，但设置一个 id: 'my-number-field' 并在 Ext.get 中使用它。

【参考方案2】：

在 Extjs4 中，您可以将属性 allowBlank 设置为 false 以防止出现空的数字字段条目。

还有一个minLength 设置来限制必须输入的字符数。