使用正则表达式限制文本框中的输入[重复]

Posted 2023-05-09

【中文标题】使用正则表达式限制文本框中的输入[重复]

【英文标题】：Using regex to restrict input in textbox [duplicate]

【发布时间】：2017-11-09 02:47:17

【问题描述】：

/^+0,1(?:\d\s?)11,13$/ 这个正则表达式只允许 + 放在首位，只允许数字......

在按键上我希望用户首先只能输入 + 和上面正则表达式验证的数字但是代码总是转到 if part..为什么正则表达式在这种情况下不起作用

function ValidatePhone(phone) 
            var expr = /^\+?(?:\d\s?)11,13$/;
            return expr.test(phone);
        


var countofPlus = 0;

    $("#phone").on("keypress", function (evt) 
        if (evt.key == "+")
        
            countofPlus = countofPlus + 1;
            if (countofPlus > 1 || this.value.length >= 1) 
                return false;
            
            else return true;
        
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && charCode != 43 && charCode != 32 && charCode != 40 && charCode != 41 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    );
$("#phone").on("keyup", function (evt) 
        debugger;
        if (evt.key == "+") 
            countofPlus--;
            return true;
        

    );

【问题讨论】：

参见例如***.com/a/37421357/1647737

它可能不起作用，因为用户不能一键输入所需的最少 11 个字符...

这是一个非常奇怪且非用户友好的实现。 不要使用keypress 函数。例如，当焦点离开页面元素时，如果数字是意外格式，您可以在文本框上显示 警告。 （并在后端再次验证。）

@le_m 我正在尝试使用此解决方案，但在 for let 循环中出现严重错误

@HDev007 你在为旧浏览器开发吗，IE？替换为for (var i = 0; i < inputs.length; i++) var input = inputs[i]; ... 。还将event => ... 替换为function(event) ... 。并将let 替换为var。

【参考方案1】：

将来自 html input that takes only numbers and the + symbol 的答案改编为您的用例会产生以下 (IE-) 兼容代码：

// Apply filter to all inputs with data-filter:
var inputs = document.querySelectorAll('input[data-filter]');

for (var i = 0; i < inputs.length; i++) 
  var input = inputs[i];
  var state = 
    value: input.value,
    start: input.selectionStart,
    end: input.selectionEnd,
    pattern: RegExp('^' + input.dataset.filter + '$')
  ;
  
  input.addEventListener('input', function(event) 
    if (state.pattern.test(input.value)) 
      state.value = input.value;
     else 
      input.value = state.value;
      input.setSelectionRange(state.start, state.end);
    
  );

  input.addEventListener('keydown', function(event) 
    state.start = input.selectionStart;
    state.end = input.selectionEnd;
  );

<input id='tel' type='tel' data-filter='\+?\d0,13' placeholder='phone number'>

以上代码将复制和粘贴、选择、退格等考虑到您当前的实现失败的地方。

另外，我将给定的正则表达式修改为\+?\d0,13，因此它允许输入不完整。使用 HTML5 表单验证来验证最终结果。

【讨论】：

感谢 le_m 支持 IE

【参考方案2】：

我认为此正则表达式仅应用于字符代码，即长度为 1 的字符串。在这种情况下，正则表达式总是会失败。

请尝试对输入值运行正则表达式测试。

【讨论】：

var regex = new RegExp("^\\+0,1(?:\d\s?)1,13$");也试过了，但没用

试试这个正则表达式 /\+[0-9]+(\s|$)/g