ExtJs NumberField验证 [英] ExtJs NumberField Validation

问题描述

  {
 xtype：'复合字段'
，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'？

我不想将config选项 allowBlank：false ，而是要在其他地方进行验证，但在该字段的一边显示一条错误消息

任何人都可以向我解释如何做？

以下是我在做什么，在firebug中产生无效方法错误：

  Ext.get（'numberfield'）。setActiveError（'this Field can not be空白'）; 
  

和

  Ext.get（'numberfield'）。markInvalid（'this Field Can not be Blank'）; 
  

解决方案

我觉得最简单的方法是使用验证函数： / p>

  {
 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））{
返回true; 
} 
 else {
 return值不能为空; 
} 
} 
} 
] 
} 
  

I have a composite element like below

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

How can I have a custom validation for the xtype:'numberField'?

I do not want to put the config option allowBlank:false, but instead, I want to validate it somewhere else, but display an error message on the side of the field.

Can anyone please explain to me how to do it?

Below is how I am doing it, which produces "invalid method" error in firebug:

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

and

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

解决方案

I think easiest is to use a validator function:

{
    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";
                }
            }
        }
    ]
}

这篇关于ExtJs NumberField验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！