Javascript 强制用户以特定格式填写电话文本字段

我有textfield让用户填写他的电话号码，但我需要强制用户以如下格式填写：（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; 
}

功能fomratPhone（电话）{
对于（变量i=0；i

---

但此代码不起作用。

假设输入的数字必须在所述长度。否则就去掉{amount}对

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

你可以用

---

另一种选择是

$（函数（）{
$（“#phone”）.inputmask（“mask”，“mask”：（9999）-9-999999“}）；
});

---

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

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

---

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

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

你可以使用图书馆。他们有一个很好的演示

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

变量phoneMask=['（'，/[1-9]/，/\d/，/\d/，'）'，''，/\d/，/\d/，/\d/，'-'，/\d/，/\d/，/\d/]
//假设您的HTML中有一个带有类.myInput的输入元素
var myInput=document.querySelector（'.myInput'）
var maskedInputController=vanillaTextMask.maskInput({
inputElement:myInput，
掩码：电话掩码
})
//调用“vanillaTextMask.maskInput”将事件侦听器添加到输入元素。
//如果需要删除这些事件侦听器，可以调用
maskedInputController.destroy（）

---

他们也有包装纸，用于角形，反应，和其他。

剥离所有非数字字符并检查电话号码是否正确可能会更容易length@AymanHussein执行正则表达式并验证是否需要在文本字段中放置匹配的内容以帮助用户，按键盘时，用户应填写数字并打印其他字符。@aymanhussen这不是一个好主意。一旦用户开始键入，占位符就会消失，因此他们无法再看到所需的格式。占位符不能代替屏幕上的提示。试试这个，我不需要去掉字符，我需要的是格式掩码。谢谢你的回答：）让用户进入一个复杂的模式来满足你的需求只会给他们的生活带来困难。正则表达式（例如Alex的答案）和格式掩码一样可以完成这项工作，您不需要依赖其他人的代码。我更喜欢使用InputMask的HTML属性系统：

$（document）.ready（函数（）{InputMask（）.mask（document.querySelectorAll（“input”）；}）在HTML输入标记中添加此属性：
数据输入掩码=“'mask'：'（999）999-9999'
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
} 

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] : ''));
}

<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>