强制用户以某种格式填写电话文本字段答案

【问题标题】：Force user to fill phone textfield in certain format强制用户以某种格式填写电话文本字段
【发布时间】：2013-06-09 19:46:40
【问题描述】：

我有文本字段让用户填写他的电话号码，但我需要强制该用户以某种格式填写，如下所示：(0599)-9-111222。

我的代码是：

function fomratPhone(phone){
     for(var i = 0; i < phone.length; i++){
         if (phone[0] == "(") continue;
         else return false; 

         if (phone[5] == ")") continue;
         else return false;   

         if (phone[6] == "-" || phone[8] == "-") continue;
         else return false; 
     }
     return true; 
}

但是这段代码不起作用。

【问题讨论】：

去除所有非数字字符并检查电话号码的长度是否正确可能会更容易
@AymanHussein 做一个正则表达式并验证事物是否匹配
我需要文本字段中的占位符来帮助用户和 onkeypress 用户应该填写数字并打印其他字符。
@AymanHussein——这不是一个好主意。一旦用户开始输入，占位符就会消失，因此他们无法再看到所需的格式。占位符不能替代屏幕提示。
试试这个github.com/RobinHerbots/jquery.inputmask

标签： javascript jquery validation

【解决方案1】：

您可以使用Text Mask 库。他们有一个很好的演示here。

要将文本字段强制输入电话号码，您可以这样（取自here）：

<script
  type="text/javascript"
  src="./node_modules/vanilla-text-mask/dist/vanillaTextMask.js"></script>
<script type="text/javascript">
  var phoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]

  // Assuming you have an input element in your HTML with the class .myInput
  var myInput = document.querySelector('.myInput')

  var maskedInputController = vanillaTextMask.maskInput({
    inputElement: myInput,
    mask: phoneMask
  })

  // Calling `vanillaTextMask.maskInput` adds event listeners to the input element. 
  // If you need to remove those event listeners, you can call
  maskedInputController.destroy()
</script>

他们也有 Angular、React 等的包装器。

【讨论】：

【解决方案2】：

如果它对其他人很方便：这里有一种方法可以在您键入时格式化。改编自this post。

function phone(n){
    var x = n.replace(/\D/g, '').match(/(\d{0,4})(\d{0,1})(\d{0,6})/);
    return (!x[2] ? x[1] : '(' + x[1] + ')' + x[2] + (x[3] ? '-' + x[3] : ''));
}

拨打电话（'39020343993'）会给你“（3902）0-343993”。拨打电话（'3902034'）给你“（3902）0-34”。

【讨论】：

【解决方案3】：

另一种选择是jQuery inputmask plugin

<input type="text" name="phone" id="phone" />

<!-- include jQuery & inputmask plugin -->
<script type="text/javascript">
    $(function(){
        $("#phone").inputmask("mask", {"mask": "(9999)-9-999999"});
    });
</script>

这只是 NF 提供的另一种变体。上面提到的那个NF我没用过，但是我用过这个没问题。此外，由于它是一个 github 项目，如果您发现错误或进行更正，您可以分叉该项目并创建包含任何新添加的拉取请求。

【讨论】：

我更喜欢使用 InputMask 的 HTML 属性系统：$(document).ready(function () { Inputmask().mask(document.querySelectorAll("input")); }); 在 HTML 输入标签中添加此属性：data-inputmask="'mask': '(999) 999-9999'"

【解决方案4】：

不知道为什么 cfs 会删除他/她的答案，这很好。您可以简单地删除任何非数字字符，检查是否有 11 位数字，然后将数字重新格式化为您所需的格式，例如

var n = '1234 5 678901'
n = n.replace(/\D/g,'');

// do validation tests
if (n.length == 11) {

    // If passed tests, reformat as required
    console.log(n.replace(/(\d{4})(\d)(\d{6})/,'($1)-$2-$3')); // (1234)-5-678901
}

【讨论】：

我不需要剥离字符，我需要格式掩码。谢谢你的回答:)
让用户输入一个复杂的模式来满足您的要求，这只会让他们的生活变得困难。并且正则表达式（例如 Alex 的答案）将与格式掩码一样完成这项工作，并且您不依赖其他人的代码。

【解决方案5】：

你可以使用 this jQuery masked input plugin

【讨论】：

【解决方案6】：

假设输入的数字必须是每个提到的长度。否则只需剥离 {amount} 对

function fomratPhone(phone){
     return phone.length == 15 && /^\((\d){4}\)-[\d]-(\d){6}$/g.test(phone);
}

【讨论】：