javascript - 如何使用 maskRe 限制 ExtJs Textfield 只接受数字。 (应接受 Positive 、 Negative 、整数和小数。)

Question

我需要将我的 ExtJs 文本字段配置为只接受可以是正数、负数、整数和最多 2 位小数的小数。我尝试使用 maskeRe 和正则表达式 /^-?[0-9]\d*(\.\d+)?$/ 。但它只接受正整数。用户不应该能够输入受限字符。此外，它应该只在第一位接受 '-' 和 '.'。介于两者之间，并且只有一次。

所以它应该接受:10,-10,10月12日，-10.34 等

Link to my fiddle

谢谢

Answer 1

将您的maskRe更改为

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})? - 一个可选的序列
  • \. - 一个点
  • [0-9]{1,2} - 任何 1 位或 2 位数字
• $ - 字符串结尾。

更新

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

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);
                        }
                    }
                }
            }],
        });
    }
});

change 事件被添加到字段 listeners 并且如果值不匹配 /^-?[0-9]*(\.[ 0-9]{0,2})?$/ 正则表达式(类似于验证正则表达式，但允许后面没有数字的点以允许进一步输入)，该值通过 this 恢复。设置值(上一个)。