[英]How to restrict ExtJs Textfield to accept only numbers using maskRe . (Should accept Positive , Negative , integer and decimal numbers.)
I need to configure my ExtJs textfield to accept only numbers which can be positive , negative , integer and decimals upto 2 decimals .我需要将 ExtJs 文本字段配置为仅接受可以是正数、负数、整数和最多 2 位小数的小数。 I tried with maskeRe
and regular expression /^-?[0-9]\\d*(\\.\\d+)?$/
.我尝试使用maskeRe
和正则表达式/^-?[0-9]\\d*(\\.\\d+)?$/
。 But its accepting only positive integers.但它只接受正整数。 User should not be able to type restricted characters.用户不应能够键入受限制的字符。 Also it should accept '-' only at first place and '.'它也应该只接受“-”和“。” in between and only once.介于两者之间,并且只有一次。
So it should accept : 10, -10, 10.12, -10.34 etc所以它应该接受: 10, -10, 10.12, -10.34 等
Thanks谢谢
Change your maskRe
to将您的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!';
},
The point is that you allow some chars using maskRe
(not the value itself) and validate the string input within the validator
.关键是您允许使用maskRe
一些字符(不是值本身)并验证validator
的字符串输入。
Pattern details :图案详情:
^
- start of string ^
- 字符串的开始-?
- an optional hyphen - 一个可选的连字符[0-9]*
- zero or more digits [0-9]*
- 零个或多个数字(\\.[0-9]{1,2})?
- an optional sequence of - 一个可选的序列
\\.
- a dot - 一个点[0-9]{1,2}
- any 1 or 2 digits [0-9]{1,2}
- 任何 1 或 2 位数字$
- end of string. $
- 字符串的结尾。Update更新
You may enforce to revert to a previous value if the input value is not matching the regex.如果输入值与正则表达式不匹配,您可以强制恢复为以前的值。 See the full snippet below:请参阅下面的完整片段:
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
event is added to the field listeners
and if the value does not match /^-?[0-9]*(\\.[0-9]{0,2})?$/
regex (similar to the validation regex, but allows a dot without a digit right after to allow further input), the value is reverted with this.setValue(prev)
. change
事件添加到字段listeners
,如果值不匹配/^-?[0-9]*(\\.[0-9]{0,2})?$/
regex(类似于验证正则表达式,但允许后面没有数字的点以允许进一步输入),该值将通过this.setValue(prev)
恢复。
you can use this property xtype: 'numberfield', it will accept all type of number.您可以使用此属性 xtype: 'numberfield',它将接受所有类型的数字。 For decimal value, we can use decimalPrecision:2.对于十进制值,我们可以使用decimalPrecision:2。
Try It, if a code will not work then please provide me your code.试试吧,如果代码不起作用,请向我提供您的代码。 So that I can suggest you the best solution.以便我可以向您推荐最佳解决方案。
All the best :)一切顺利:)
He left this way of doing it, in case someone is doing it this way they can serve他离开了这种方式,如果有人这样做,他们可以服务
Only Letters:只有字母:
<ext:TextField ID="tfname" FieldLabel="Name" MaskRe="([a-zA-Z])" runat="server" >
</ext:TextField>
Only Numbers:只有数字:
<ext:TextField ID="tfnumber" FieldLabel="Number" MaskRe="([0-9])" runat="server" >
</ext:TextField>
accept all previous:接受所有以前的:
<ext:TextField ID="tfname" FieldLabel="Name" MaskRe="([a-zA-Z0-9])" runat="server" >
</ext:TextField>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.