使用正則表達式限制textfield/numberfield中的輸入字符？

我在ExtJS窗體中使用numberField，並且只想輸入正數，範圍在0-99之間，它只能接受2個字符（且不能超過2個字符）。使用正則表達式限制textfield/numberfield中的輸入字符？

{ 
    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個字符？

來源

2011-08-10 Ashwin Parmar

這是一個總的玩笑，我們必須google如何在EXT中設置maxLength（一個HTML簡單屬性）。這個框架是一個笑話。 –

對，它是個笑話，但它有不同的語法。但這不好，我們應該使用不同的語法。 –

如果你正在使用的版本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屬性，但我認爲這不會阻止粘貼的無效值。

來源

2011-08-10 08:55:03

感謝哥們，我也以不同的方式做 –

+1，讓我開始了一項新功能。自發布以來，我一直在努力學習4的所有細節，而男孩也有很多。乾杯。 – Stephano

不知道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

來源

2012-04-10 13:31:17

非常感謝 –

，人人，世界衛生組織卡在SAME

對於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

所以，你只需要指定最大長度，並設置enforceMaxLength爲true。根據對以前的帖子，可能是這樣的：

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

來源

2014-09-29 13:16:45

只是一個幫手，反而限制一個文本框，只允許數字，您可以設置與屬性「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 
},

來源

2014-12-01 04:33:58

maxLength: 2, 
enforceMaxLength: true,

來源

2015-05-11 13:26:07

動態設置的最大長度，我想出了這個覆蓋：

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

來源

2015-07-10 19:23:42 incutonez

它非常簡單的使用maskre config來限制文本框。如果將允許您輸入數字&字母。

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

來源

2016-03-10 05:26:28

使用正則表達式限制textfield/numberfield中的輸入字符？

回答

相關問題