Restrict the input characters in textfield / numberfield using regular expression?

问题

I use numberField in ExtJS Form and want to enter only positive numbers, in range of 0-99 and it should accept only 2 characters (and not more than 2).

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

gives an error in above code but it is accepting more then 2 characters.

I also tried below but issue is same:

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

How to restrict to input more then 2 characters?

回答1:

if you're using version 3, the TextField's maxLength documentation describes using the autoCreate property to state the maximum length (the doc example shows a NumberField but it is also supported by the TextField class):

maxLength : Number Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back tracking. To restrict the maximum number of characters that can be entered into the field use autoCreate to add any attributes you want to a field, for example:

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

Using version 4, a TextField has the enforceMaxLength property.

If you're set on using a regex, both versions support the maskRe property, although I don't think this prevents invalid values that are pasted.

回答2:

Not sure if vtype was there before ExtJS 4.x but this is how you can use 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'                    
}

Thanks Punith

回答3:

FOR EVERYBODY, WHO STUCK ON THE SAME

For ExtJS 4.x You even don't need to create VType. From ExtJS 4.x documentation for Ext.form.field.Number:

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

So, You just have to specify maxLength and set enforceMaxLength to true. According on previous post it might look like this:

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

回答4:

Just a helper, but to restrict a textfield to allow only numbers you can set the properties of the text field with the attribute "maskRe". It allows you to create masks with regular expressions. Here is a mask that allows you to enter only the numbers:

{
    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:

For dynamically setting the maxLength, I came up with this override:

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:

Its very simple use maskre config to restrict textfield. if will allows you to enter just numbers & alphabets.

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

来源：https://stackoverflow.com/questions/7007957/restrict-the-input-characters-in-textfield-numberfield-using-regular-expressio