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将每个字符与＆＃34; maskRe＆＃34;进行比较。表达

我想要＆＃34; One or No Comma＆＃34; 和＆＃34; No Decimal Point＆＃34; 任何人都可以告诉我这个解决方案或指出我的错误？

Answer 1

您可以将逗号使用?量词：

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

请参阅regex demo

正则表达式匹配：

^ - 字符串开头
\d+ - 一位或多位
,? - 一个或零个逗号
\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 的数字字段组件？它是数字的专用输入字段，只允许输入数字输入。

当你查看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

3 个答案: