使用正则表达式限制textfield/numberfield中的输入字符？

Question

我在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个以上的字符？

Answer 1

如果您使用的是版本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属性,但我认为这不会阻止粘贴的无效值.

Answer 2

不确定在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