Ограничить входные символы в поле textfield/numberfield с помощью регулярного выражения?

Я использую numberField в форме ExtJS и хочу вводить только положительные числа в диапазоне 0-99, и он должен принимать только 2 символа (и не более 2).

{
    xtype:"textfield",
    allowNegative: false,
    allowDecimals: false,
    minValue: 0,
    maxValue: 99,
    maxLength: 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";
    }
}

Как ограничить ввод более двух символов?

Ответы

Ответ 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, хотя я не думаю, что это предотвращает вставку недопустимых значений.

Ответ 2

Не уверен, что vtype был до ExtJS 4.x, но вы можете использовать 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

Ответ 3

ДЛЯ ВСЕХ, КОТОРЫЕ НАКАЗЫВАЮТСЯ НА ИМЕЮТСЯ ТОЛЬКО

Для ExtJS 4.x Вам даже не нужно создавать VType. Из документации ExtJS 4.x для Ext.form.field.Number:

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

Итак, вам просто нужно указать maxLength и установить для принудительного использованияMaxLength значение true. Согласно предыдущему сообщению это может выглядеть так:

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

Ответ 4

Просто помощник, но чтобы ограничить текстовое поле разрешать только номера, вы можете установить свойства текстового поля с атрибутом "maskRe". Это позволяет создавать маски с регулярными выражениями. Вот маска, которая позволяет вводить только числа:

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

Ответ 5

maxLength: 2,
enforceMaxLength: true,

Ответ 6

Для динамической установки 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);
    }
  }
});

Ответ 7

Его очень простое использование maskre config для ограничения текстового поля. если это позволит вам вводить только цифры и алфавиты.

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