web-dev-qa-db-ja.com

正規表現を使用してテキストフィールド/数値フィールドの入力文字を制限しますか？

ExtJSフォームでnumberFieldを使用し、0〜99の範囲の正数のみを入力し、2文字（2文字以下）のみを受け入れます。

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

上記のコードでエラーが発生しますが、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";
    }
}

2文字を超える入力を制限するにはどうすればよいですか？

regexvalidationextjs
18
Ashwin Parmar

バージョン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プロパティがサポートされますが、これにより無効な値が貼り付けられるのを防ぐことはできません。

15
user69820

ExtJS 4.xより前にvtypeがあったかどうかはわかりませんが、これが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

7
Punith Raj

みんなのために、誰が同じことをするのか

ExtJS 4.xの場合VTypeを作成する必要はありません。 Ext.form.field.NumberのExtJS 4.xドキュメントから：

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

したがって、maxLengthを指定し、enforceMaxLengthをtrueに設定するだけです。以前の投稿によると、次のようになります。

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

単なるヘルパーですが、テキストフィールドを制限して数字のみを許可するには、属性「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
},
1
Tyler Rafferty

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

その非常に簡単なmaskre configを使用して、テキストフィールドを制限します。数字とアルファベットだけを入力できる場合。

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