web-dev-qa-db-fra.com

Restreindre les caractères saisis dans textfield/numberfield en utilisant une expression régulière?

J'utilise numberField dans le formulaire ExtJS et je souhaite entrer uniquement des nombres positifs, dans une plage de 0 à 99 et il ne devrait accepter que 2 caractères (et pas plus de 2).

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

donne une erreur dans le code ci-dessus mais il accepte plus de 2 caractères.

J'ai aussi essayé ci-dessous mais le problème est le même:

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

Comment restreindre l'entrée de plus de 2 caractères?

regexvalidationextjs
18
Ashwin Parmar

si vous utilisez la version 3, la documentation maxLength de TextField décrit l'utilisation de la propriété autoCreate pour indiquer la longueur maximale (l'exemple de documentation montre un NumberField mais il est également pris en charge par la classe TextField):

maxLength: Number Longueur maximale du champ de saisie autorisée par validation (par défaut, Number.MAX_VALUE). Ce comportement est destiné à fournir retour instantané à l'utilisateur en améliorant la convivialité pour permettre le collage et l'édition ou le doublage et le suivi. Pour limiter le maximum nombre de caractères pouvant être entrés dans le champ utilise autoCreate pour ajouter les attributs souhaités à un champ, par exemple:

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

En utilisant la version 4, un TextField a la propriété enforceMaxLength .

Si vous souhaitez utiliser un regex, les deux versions prennent en charge la propriété maskRe, bien que je ne pense pas que cela empêche les valeurs non valides collées.

15
user69820

Vous ne savez pas si vtype existait avant ExtJS 4.x, mais voici comment vous pouvez utiliser 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'                    
}

Merci Punith

7
Punith Raj

POUR TOUT LE MONDE, QUI RESTE SUR LE MEME

Pour ExtJS 4.x, vous n'avez même pas besoin de créer de VType. De la documentation ExtJS 4.x pour Ext.form.field.Number:

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

Donc, il vous suffit de spécifier maxLength et de définir enforceMaxLength sur true. Selon le post précédent, cela pourrait ressembler à ceci:

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

Juste une aide, mais pour restreindre un champ de texte à n'autoriser que des chiffres, vous pouvez définir les propriétés du champ de texte avec l'attribut "maskRe". Il vous permet de créer des masques avec des expressions régulières. Voici un masque qui vous permet de ne saisir que les chiffres:

{
    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
},
1
Tyler Rafferty

Pour définir dynamiquement la longueur maximale, je propose ce remplacement:

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);
    }
  }
});
0
incutonez
maxLength: 2,
enforceMaxLength: true,
0
Joabe Lucena

Son utilisation très simple utilise maskre config pour restreindre textfield . If vous permet de saisir uniquement des chiffres et des alphabets. 

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