Frage Beschränken Sie die Eingabezeichen im Textfeld / Zahlenfeld mit regulären Ausdruck?


Ich benutze numberField in ExtJS Form und möchte nur positive Zahlen im Bereich von 0-99 eingeben und es sollte nur 2 Zeichen (und nicht mehr als 2) akzeptieren.

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

gibt einen Fehler im obigen Code, akzeptiert aber mehr als 2 Zeichen.

Ich habe es auch unten versucht, aber das Problem ist dasselbe:

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

Wie kann man mehr als 2 Zeichen eingeben?


18
2017-08-10 08:35


Ursprung


Antworten:


Wenn Sie Version 3 verwenden, Textfeldist es maxLength Dokumentation beschreibt die Verwendung der autoCreate Eigenschaft, um die maximale Länge anzugeben (das Dokument zeigt ein NumberField, aber es wird auch von der TextField-Klasse unterstützt):

maxLength: Number Maximale von der Validierung zugelassene Eingabefeldlänge   (standardmäßig Number.MAX_VALUE). Dieses Verhalten soll bereitstellen   sofortige Rückmeldung an den Benutzer durch Verbesserung der Benutzerfreundlichkeit für das Einfügen   und Bearbeiten oder Überschreiben und Zurückverfolgen. Um das Maximum zu beschränken   Anzahl der Zeichen, die in das Feld eingegeben werden können, verwendet autoCreate   So fügen Sie einem Feld beliebige Attribute hinzu:

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

Mit Version 4 verfügt ein TextField über das enforceMaxLength Eigentum.

Wenn Sie eine Regex verwenden, unterstützen beide Versionen die maskRe Eigenschaft, obwohl ich glaube, dass dies ungültige Werte verhindert, die eingefügt werden.


15
2017-08-10 08:55



Ich bin mir nicht sicher, ob vtype vor ExtJS 4.x war, aber so können Sie vtype verwenden.

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

Vielen Dank Punith


7
2018-04-10 13:31



FÜR JEDER, DER ES SELBST GIBT

Für ExtJS 4.x müssen Sie VType nicht erstellen. Aus der ExtJS 4.x Dokumentation für Ext.form.field.Number:

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

Sie müssen also nur maxLength angeben und enforceMaxLength auf true setzen. Laut vorheriger Post könnte es so aussehen:

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

3
2017-09-29 13:16



Nur ein Helfer, aber um ein Textfeld so zu beschränken, dass nur Zahlen erlaubt sind, können Sie die Eigenschaften des Textfelds mit dem Attribut "maskRe" festlegen. Sie können Masken mit regulären Ausdrücken erstellen. Hier ist eine Maske, mit der Sie nur die Zahlen eingeben können:

{
    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
2017-12-01 04:33



maxLength: 2,
enforceMaxLength: true,

0
2018-05-11 13:26



Für die dynamische Einstellung der maxLength habe ich diese Überschreibung gefunden:

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
2017-07-10 19:23



Seine sehr einfache Verwendung maskre config, um Textfeld einzuschränken. Wenn Sie nur Zahlen und Alphabete eingeben können.

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

0
2018-03-10 05:26