我在ExtJS表单中使用numberField并且只想输入正数,范围为0-99,它应该只接受2个字符(不超过2个)。
{
xtype:"textfield",
allowNegative: false,
allowDecimals: false,
minValue: 0,
maxValue: 99,
maxLength: 2
}
在上面的代码中给出了错误,但它接受了超过2个字符。
我也在下面试过,但问题是一样的:
{
xtype:"textfield",
regex: /^\d{0,2}$/,
regexText: "<b>Error</b></br>Invalid Number entered.",
validator: function(v) {
return /^\d{0,2}$/.test(v)?true:"Invalid Number";
}
}
如何限制输入2个以上的字符?
答案 0 :(得分:15)
如果您使用的是版本3,则TextField的maxLength
文档会使用autoCreate
属性来说明最大长度(doc示例显示了NumberField但它也是由TextField类支持):
maxLength:Number验证允许的最大输入字段长度 (默认为Number.MAX_VALUE)。此行为旨在提供 通过提高允许粘贴的可用性来即时反馈给用户 和编辑或改写和回溯。限制最大值 可以在字段中输入的字符数使用autoCreate 将所需的任何属性添加到字段中,例如:
var myField =
new Ext.form.NumberField({
id: 'mobile',
anchor:'90%',
fieldLabel: 'Mobile',
maxLength: 16, // for validation
autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete:
'off', maxlength: '10'} });
使用版本4,TextField具有enforceMaxLength
属性。
如果您开始使用正则表达式,则两个版本都支持maskRe
属性,但我认为这不会阻止粘贴的无效值。
答案 1 :(得分:7)
不确定在ExtJS 4.x之前是否存在vtype,但这是你可以使用vtype的方法。
var validMileRadius = /^([0-9]{1,4})/;
Ext.apply(Ext.form.field.VTypes, {
// vtype validation function
radius: function(val, field) {
return validMileRadius.test(val);
},
radiusText: 'Not a Valid Radius.'
});
{
xtype: 'textfield',
width: 40,
maxLength : 4,
style : {marginLeft:'10px'},
id : 'cityRadius',
enforceMaxLength :4,
vtype : 'radius'
}
由于 Punith
答案 2 :(得分:3)
对于每个人,世界卫生组织同样坚持
对于ExtJS 4.x您甚至不需要创建VType。来自Ext.form.field.Number
的ExtJS 4.x文档:
enforceMaxLength : Boolean
True to set the maxLength property on the underlying input field. Defaults to false
因此,您只需指定maxLength并将enforceMaxLength设置为true。根据之前的帖子,它可能看起来像这样:
{
xtype: 'textfield',
width: 40,
maxLength : 4,,
enforceMaxLength : true
style : {marginLeft:'10px'},
id : 'cityRadius'
}
答案 3 :(得分:1)
只是一个帮手,但要限制文本字段只允许数字,您可以使用属性&#34; maskRe&#34;设置文本字段的属性。它允许您使用正则表达式创建蒙版。这是一个允许您只输入数字的掩码:
{
xtype: 'textfield',
fieldLabel: 'Text Field(numbers-only)',
enforceMaxLength:true, //Restrict typing past maxLength: n
maxLength: 8, //Set max length validation
maskRe:/[0-9.]/ //Allow only numbers
},
答案 4 :(得分:0)
maxLength: 2,
enforceMaxLength: true,
答案 5 :(得分:0)
为了动态设置maxLength,我提出了这个覆盖:
Ext.override(Ext.form.field.Number, {
/**
* Setter: this method will set the maxLength variable on our NumberField
* class, and on its actual dom element, so we can actually restrict the user
* from entering over the maxLength
* @param {Number} maxLength
*/
setMaxLength: function(maxLength) {
this.maxLength = maxLength;
var inputEl = this.inputEl;
if (inputEl) {
var domEl = inputEl.dom;
if (domEl) {
domEl.maxLength = maxLength;
}
}
},
/**
* Shortcut method for setting the maxLength based on the maxValue... if
* maxValue is not set, then 0 is used, which means the maxLength will be 1
*/
setMaxLengthFromMaxValue: function() {
var maxValue = this.maxValue || 0;
if (maxValue >= 0) {
this.setMaxLength(maxValue.toString().length);
}
}
});
答案 6 :(得分:0)
使用maskre config非常简单,可以限制文本字段。 如果允许你只输入数字&amp;字母。
xtype: 'textfield',
fieldLabel: 'Text Field(numbers-only)',
enforceMaxLength:true,
maxLength: 8,
maskRe: /[A-Za-z0-9]/