使用正则表达式限制文本字段/数字字段中的输入字符？答案

【问题标题】：Restrict the input characters in textfield / numberfield using regular expression?使用正则表达式限制文本字段/数字字段中的输入字符？
【发布时间】：2011-08-10 08:35:29
【问题描述】：

我在 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 个字符？

【问题讨论】：

这完全是个笑话，我们必须谷歌如何在 EXT 中设置 maxLength（一个 HTML 简单属性）。那个框架就是个笑话。
对，这是个玩笑，但它也有不同的语法。但这不好，我们应该使用不同的语法。

标签： regex validation extjs

【解决方案1】：

如果您使用的是版本 3，TextField 的 maxLength 文档描述了使用 autoCreate 属性来声明最大长度（文档示例显示了 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 属性，尽管我认为这不会阻止粘贴无效值。

【讨论】：

谢谢哥们，我也用不同的方式做
+1 为我开启了一项新功能。自从它发布以来，我一直在努力学习 4 的所有细节，男孩有很多。干杯。

【解决方案2】：

不确定在 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'                    
}

谢谢普尼斯

【讨论】：

【解决方案3】：

对于每个人，谁坚持相同

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

【讨论】：

【解决方案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 配置来限制文本字段。如果将允许您只输入数字和字母。

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

【讨论】：