如何使用 maskRe 限制 ExtJs Textfield 仅接受数字。 （应该接受 Positive 、 Negative 、整数和小数。）

我需要将 ExtJs 文本字段配置为仅接受正数、负数、整数和最多 2 位小数的数字。我尝试过maskeRe和正则表达式/^-?[0-9]\d*(\.\d+)?$/。但它只接受正整数。用户不应该能够输入受限制的字符。它还应该只在第一位接受“-”，而“.”之间且仅一次。

所以它应该接受： 10、 -10, 10.12, -10.34等

Thanks

改变你的maskRe to

maskRe: /[0-9.-]/,
validator: function(v) {
    return /^-?[0-9]*(\.[0-9]{1,2})?$/.test(v)? true : 'Only positive/negative float (x.yy)/int formats allowed!';
},

关键是你允许使用一些字符maskRe（不是值本身）并验证字符串中的输入validator.

图案细节:

• ^- 字符串的开头
• -?- 可选的连字符
• [0-9]*- 零个或多个数字
• (\.[0-9]{1,2})? - an optional sequence of
  • \. - a dot
  • [0-9]{1,2}- 任意 1 或 2 位数字
• $- 字符串结尾。

Update

如果输入值与正则表达式不匹配，您可以强制恢复到以前的值。请参阅下面的完整片段：

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'maskRe',
            width: 600,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Enter Postive or Negative integer or decimal No.',
                width : 600,
                labelWidth : 300,
                anchor: '100%',
                maskRe: /[0-9.-]/,
                validator: function(v) {
                    return /^-?[0-9]*(\.[0-9]{1,2})?$/.test(v)? true : 'Only positive/negative float (x.yy)/int formats allowed!';
                },
                listeners: {
                    change: function(e, text, prev) {
                        if (!/^-?[0-9]*(\.[0-9]{0,2})?$/.test(text)) 
                        {   
                            this.setValue(prev);
                        }
                    }
                }
            }],
        });
    }
});

The change事件已添加到字段中listeners如果该值不匹配/^-?[0-9]*(\.[0-9]{0,2})?$/正则表达式（类似于验证正则表达式，但允许在后面添加一个没有数字的点以允许进一步输入），该值将恢复为this.setValue(prev).