强制用户以特定格式填写电话号码文本框

Question

我是一名有用的助手，可以为您翻译文本。

我有一个文本框，让用户填写他的电话号码，但我需要强制用户按照特定格式填写，例如：(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; 
}

但是这段代码不起作用。

- Ayman Hussein

---

可能更容易的方法是去除所有非数字字符并检查电话号码是否具有正确长度。 - cfs

@AymanHussein 进行正则表达式匹配，验证是否匹配。 - fGo

我只是在自言自语。那么，有什么好的想法可以做到这一点呢？ - Ayman Hussein

尝试使用此链接 https://github.com/RobinHerbots/jquery.inputmask - sangram parmar

我建议使用一种始终可见的屏幕提示，而不是占位符。它可以是一个标签或者您可以使用任何一种提示系统（有许多不错的 JavaScript 库）。此外，您应该扩展您的问题，因为目前并不太清楚您正在尝试实现什么。 - ragklaat

Answer 1

另一个选择是jQuery inputmask插件。

<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项目，如果您发现错误或进行更正，您可以fork该项目并创建一个pull request来添加任何新的内容。

- Brad Christie

---

我更喜欢使用InputMask的HTML属性系统：$(document).ready(function () { Inputmask().mask(document.querySelectorAll("input")); });在HTML输入标签中添加以下属性：data-inputmask="'mask': '[phone]'" - Eric Milliot-Martinez

Answer 2

您可以使用这个jQuery掩码输入插件。

- N F

Answer 3

你可以使用Text Mask库。他们有一个很好的演示在这里。

要将文本字段强制转换为电话号码，您可以像这样做（取自这里）：

<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和其他框架提供了包装器。

- Chris Smith

Answer 4

如果对其他人有用的话：这里有一种方法可以使它在您输入时格式化。它是从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] : ''));
}

调用phone('39020343993')将返回"(3902)0-343993"。调用phone('3902034')将返回"(3902)0-34"。

- PeterM

Answer 5

假设输入的数字必须是指定长度。否则只需剥离 {amount} 对数。

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

- Alex

Answer 6

不知道为什么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
} 

- RobG

---

我不需要去除字符，我需要格式掩码。谢谢您的答复 :) - Ayman Hussein

让用户输入复杂的模式以符合您的要求只会给他们带来麻烦。而正则表达式（例如Alex的答案）将像格式掩码一样完成工作，您不必依赖于其他人的代码。 - RobG