ExtJS 4.2 中欧洲货币输入的正则表达式

Question

我有一个文本字段，用户可以在其中输入价格值。我必须将输入作为 0,00（没有小数点，只有一个逗号表示美分值）。所以用户可以输入以下

123
123,（我会在模糊事件中去掉这个逗号）
123,1
123,11

所以我写了这个 RegExp: ^\d+(,\d{0,2})?$ 并在 regexpal.com 上测试了上面的测试用例，它验证了所有的测试用例。

现在当我在我的代码中使用它时

xtype:'textfield',
fieldLabel: 'Tiefbau(informativ)',
maskRe: /^\d+(,\d{0,2})?$/

并尝试输入值 123,12，它不允许我输入逗号因为我发现 Textfield 将每个单独的字符与 "maskRe" 表达式进行比较.

我想要"One Or No Comma"和"No Decimal Point" 谁能告诉我解决方案或指出我的错误？

Answer 1

您可以使用带逗号的 ? 量词：

/^\d+,?\d{0,2}$/

见regex demo

正则表达式匹配：

^ - 字符串开头
\d+ - 1 个或多个数字
,? - 一个或零个逗号
\d{0,2} - 零、一位或两位数
$ - 字符串结尾

使用它 like this，例如：

Ext.create('Ext.form.Panel', {
    renderTo: document.body,
    title: 'User Form',
    height: 75,
    width: 300,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [
        {
           xtype:'textfield',
           name: 'name',
           fieldLabel: 'Tiefbau(informativ)',
           validator: function (val) {
               var tr = /^\d+,?\d{0,2}$/.test(val),
                 errMsg = "Must be a valid number";
               return tr ? true : errMsg;
           }
        }
    ]
});

Answer 2

为什么不使用派生自 textfield 的 numberfield 组件？它是一个专门的数字输入字段，只允许输入数字输入。

当您查看 documentation 时，您会发现它使用逗号而不是 decimalSeparator 配置的点来解决您的问题。

使用 minValue 和 decimalPrecision 配置，您应该有一个适合您需要的输入字段。

{
    xtype: 'numberfield',
    fieldLabel: 'Tiefbau(informativ)',

    decimalSeparator: ',',   // use comma instead of dot
    minValue: 0,             // prevents negative numbers
    decimalPrecision: 2,     // maximum precision to display after the decimal separator
    allowExponential: false, // disallow exponential values ([e+-] chars not typable)

    // Remove spinner buttons, and arrow key and mouse wheel listeners
    hideTrigger: true,
    keyNavEnabled: false,
    mouseWheelEnabled: false
}

参见fiddle。

Answer 3

我接受的答案是完美的。我做的另一个解决方案是监听文本字段的更改事件并执行此操作：

change: function(thiss, newValue, oldValue, eOpts ){

    var regX = (/^(\d+(,\d{0,2})?$)/gm).test(newValue);

    if(regX == false ){

      if(newValue == "")
        thiss.setValue("");
      else
        thiss.setValue(oldValue);   
    }
}

它将允许用户输入任何内容，但如果用户的新值不符合 RegExp，它将用旧的已知值替换新值。

ExtJS 4.2 中欧洲货币输入的正则表达式

Regular Expression for European Currency Input in ExtJS 4.2

javascript

regex

extjs

extjs4.2