Jquery电话号码屏蔽和验证[重复]答案

【问题标题】：Jquery phone number masking and validation [duplicate]Jquery电话号码屏蔽和验证[重复]
【发布时间】：2020-02-06 06:46:37
【问题描述】：

下面的代码工作正常，但我想通过检查行首的加号来补充它。也就是说，如果用户添加«+»，则数字变为«+9 (999) 999-99-99»，如果他不添加加号而只输入数字，则为«9 (999) 999-99- 99»。也就是说，任何情况下，数字都必须是 11，而«+» 号只能出现在行首。

 var phoneInput = document.querySelector(".i_phone");
phoneInput.addEventListener("keydown", function(e) {
  "ArrowLeft" != e.key && "ArrowRight" != e.key && "Backspace" != e.key && "Delete" != e.key && "Tab" != e.key && e.preventDefault();
  var t = "1 (111) 111-11-11";
  if (/[0-9\+\ \-\(\)]/.test(e.key)) {
    var a = this.value,
      n = a.length;
    if (/[0-9]/.test(e.key))
      if ("1" == t[n]) this.value = a + e.key;
      else
        for (var r = n; r < t.length; r++) {
          if ("1" == t[r]) {
            this.value = a + e.key;
            break
          }
          a += t[r]
        }
  }
});

&lt;input type="tel" name="phone" placeholder="Your Phone" class="i_phone" required=""&gt;

【问题讨论】：

标签： jquery regex

【解决方案1】：

您的正则表达式没问题，并且符合您的 jquery 解决方案。我刚刚在开始时使用 if 条件对其进行过滤，以防止在第一个字符之后出现多个 +。最后，如果没有提供+，则添加它。

var phoneInput = document.querySelector(".i_phone");
phoneInput.addEventListener("keydown", function(e) {
  "ArrowLeft" != e.key && "ArrowRight" != e.key && "Backspace" != e.key && "Delete" != e.key && "Tab" != e.key && e.preventDefault();
  var t = "+1 (111) 111-11-11";
  if (/[0-9\+\ \-\(\)]/.test(e.key)) {
    var a = this.value,
      n = a.length;
     if(n>0 && e.key=='+');
     
    else if (/[0-9+]/.test(e.key)){
      if ("1" == t[n]) 
        this.value = a + e.key;
      else if ("+" == t[n]) 
        {
            this.value = a + e.key;      
        }
      else if ("+" != t[n]) 
      {
      
          for (var r = n; r < t.length; r++) {
            if ("1" == t[r]) {
              this.value = a + e.key;
              break
            }
            a += t[r]
          }
       }
       
      if(this.value.length==1 && this.value!="+")
      {
        this.value="+"+this.value;
      
      
      }
    }   
  }
});

&lt;input type="tel" name="phone" placeholder="Your Phone" class="i_phone" required=""&gt;

【讨论】：