如何使用 maskRe 限制 ExtJs Textfield 只接受数字。（应该接受 Positive 、 Negative 、 integer 和 decimal 数字。）答案

【问题标题】：How to restrict ExtJs Textfield to accept only numbers using maskRe . (Should accept Positive , Negative , integer and decimal numbers.)如何使用 maskRe 限制 ExtJs Textfield 只接受数字。（应该接受 Positive 、 Negative 、 integer 和 decimal 数字。）
【发布时间】：2017-04-06 01:06:35
【问题描述】：

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

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

Link to my fiddle

谢谢

【问题讨论】：

标签： javascript regex validation extjs textfield

【解决方案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 位数字
$ - 字符串结束。

更新

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

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.setValue(prev) 还原值。

【讨论】：

感谢@Wiktor，这行得通。但我的要求是用户不应该能够输入受限字符而不是显示错误消息。
它也应该只在首位接受 '-' 和 '.'介于两者之间并且只有一次。编辑了我的问题。抱歉，要求不完整。
如果我不希望文本字段完全接受字符，而不是在下面显示和出错怎么办？
@SartherisStormhammer 查看我的更新。请注意，您仍然可以输入“错误”字符，但该值仍会恢复为前一个字符。

【解决方案2】：

您可以使用此属性 xtype: 'numberfield'，它将接受所有类型的数字。对于十进制值，我们可以使用decimalPrecision:2。

试试吧，如果代码不起作用，请提供您的代码。以便我向您推荐最佳解决方案。

一切顺利:)

【讨论】：

这应该是被接受的答案。非常感谢。

【解决方案3】：

他离开了这种方式，以防有人这样做，他们可以服务

只有字母：

<ext:TextField ID="tfname" FieldLabel="Name" MaskRe="([a-zA-Z])" runat="server" >
</ext:TextField>

只有数字：

<ext:TextField ID="tfnumber" FieldLabel="Number" MaskRe="([0-9])" runat="server" >
</ext:TextField>

接受所有以前的：

<ext:TextField ID="tfname" FieldLabel="Name" MaskRe="([a-zA-Z0-9])" runat="server" >
</ext:TextField>

【讨论】：