Restringir los caracteres de entrada en el campo de texto/campo de número utilizando la expresión regular?

Question

Uso numberField en ExtJS Form y quiero ingresar solo números positivos, en el rango de 0-99 y solo debe aceptar 2 caracteres (y no más de 2).

{ 
    xtype:"textfield", 
    allowNegative: false, 
    allowDecimals: false, 
    minValue: 0, 
    maxValue: 99, 
    maxLength: 2 
} 

da un error en el código anterior pero está aceptando más de 2 caracteres.

También probé a continuación, pero es cuestión misma:

{ 
    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"; 
    } 
} 

Cómo restringir la entrada a más de 2 caracteres?

Answer 1

si está utilizando la versión 3, maxLength documentación de la TextField 's describe el uso de la propiedad autoCreate indicar la longitud máxima (el ejemplo muestra un documento NumberField pero también es apoyado por la clase TextField):

maxLength: Número Longitud de campo de entrada máxima permitida por la validación (por defecto es Number.MAX_VALUE). Este comportamiento está destinado a proporcionar comentarios instantáneos al usuario al mejorar la usabilidad para permitir pegar y editar o sobrescribir y realizar un seguimiento posterior. Para restringir al máximo número de caracteres que se pueden introducir en el campo de utilizar autocreate añadir cualquier atributo que desea un campo, por ejemplo:

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'} }); 

Al usar la versión 4, un campo de texto tiene la propiedad enforceMaxLength .

Si está configurado con una expresión regular, ambas versiones admiten la propiedad maskRe, aunque no creo que esto impida que los valores no válidos se peguen.

Answer 2

No estoy seguro si vtype estaba allí antes de ExtJS 4.x pero así es como puede usar 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'      
} 

Gracias Punith

Answer 3

para todos, que se pegaron EN EL MISMO

Para ExtJS 4.x Incluso no es necesario para crear vTipo. A partir de la documentación 4.x ExtJS para Ext.form.field.Number:

enforceMaxLength : Boolean 
True to set the maxLength property on the underlying input field. Defaults to false 

lo tanto, sólo tiene que especificar maxLength y establecer enforceMaxLength true. Según el post anterior que podría tener este aspecto:

{ 
    xtype: 'textfield', 
    width: 40, 
    maxLength : 4,, 
    enforceMaxLength : true 
    style : {marginLeft:'10px'}, 
    id : 'cityRadius'     
} 

Answer 4

Sólo un ayudante, pero para restringir un campo de texto para permitir que sólo los números se pueden establecer las propiedades del campo de texto con el atributo "maskRe". Le permite crear máscaras con expresiones regulares.Aquí es una máscara que le permite introducir sólo los números:

{ 
    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 
}, 

Answer 5

maxLength: 2, 
enforceMaxLength: true, 

Answer 6

para configurar dinámicamente la maxLength, me ocurrió con este aumento de presupuesto:

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); 
    } 
    } 
}); 

Answer 7

Es muy simple uso maskre config para restringir el campo de texto. if le permitirá ingresar solo números & alfabetos.

xtype: 'textfield', 
    fieldLabel: 'Text Field(numbers-only)', 
    enforceMaxLength:true, 
    maxLength: 8, 
    maskRe: /[A-Za-z0-9]/