Vue.js 应用电话号码格式答案

【问题标题】：Vue.js aplying phone number formatVue.js 应用电话号码格式
【发布时间】：2020-02-12 03:20:07
【问题描述】：

我是 Vue.js 的新手，并试图找到一种方法来将输入字段中的电话号码格式化为所需的格式。我能够在用纯 javascript 编写的 stackoverflow 上找到答案，但我不知道如何在 Vue 中使用正则表达式。

javascript 中的解决方案

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

所以我的问题是如何在这个输入 div 上应用它？因此，它允许用户只输入数字，并且当他输入数字时，数字会以所需的格式显示。

<div contentEditable="true" class="inputDiv"></div>

示例我想使用 vue.js 实现什么。

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

&lt;input type="text" id="phone" placeholder="(555) 555-5555"/&gt;

我试图寻找一个可能非常直截了当的答案，但由于我是 Vue 的新手，所以我找不到任何可以帮助我让它发挥作用的东西。

【问题讨论】：

我不明白您到底想要什么：您想在将输入值发送到后端之前对其应用某种格式吗？您想验证号码是否符合特定格式？您是否要修改输入，以便当用户使用错误格式书写时应用程序会实时纠正它？
很抱歉让您的任务感到困惑。我编辑了这个问题。希望它能提供所有需要的信息。

标签： vue.js

【解决方案1】：

您可能需要了解 vue 的工作原理并进行一些操作以更好地理解。

他们的文档很棒，你可以从那里开始 - https://vuejs.org/v2/guide/

对于这个问题，您可以通过以下方式使用该框架

new Vue({
  el: "#app",
  data: {
    value: ''
  },
  methods: {
    acceptNumber() {
        var x = this.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  this.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Phone number</h2>
   <input v-model="value" type="text" @input="acceptNumber">
</div>

【讨论】：

正是我在寻找的东西，你是对的，可能需要一些步骤。谢谢！
还有一个问题，我在将其附加到 div
而不是输入时遇到问题......我需要做些什么不同的事情？
v-model 适用于元素的 value 属性 - 而 div v-model 不起作用。寻找v-bind 使其更易于编辑
@SatyamPathak，你能在这里看看与 vee-validate 相关的问题吗：stackoverflow.com/questions/59444033/…？

【解决方案2】：

通常在 Vue 中，您使用 v-model 处理表单。在典型的形式中，您的组件中可能有一个 phoneNumber 变量，并使用 v-model 将其绑定到输入：

<template>
  <input name="phone" v-model="phoneNumber" />
</template>

<script>
export default new Vue ({
  data() {
    return {
      phoneNumber: '',
    }
  }
})
</script>

问题在于v-model 不允许您在用户键入时动态更改值，因此这对您不起作用。

但是，您仍然可以使用v-bind 提供值，并使用v-on 对用户输入做出反应，而不是与v-model 绑定。以下 sn-p 将始终转换用户向 mayus 写入的任何内容：

<template>
  <input name="phone" :value="phoneNumber" @input="handleUserInput" />
</template>

<script>
export default new Vue ({
  data() {
    return {
      phoneNumber: '',
    }
  },
  methods: {
    handleUserInput(input) {
      this.value = input.toUpperCase();
    }
  }
})
</script>

对电话号码应用格式只是比toUpperCase()复杂一点，但思路是一样的：

<template>
  <input name="phone" :value="phoneNumber" @input="handleUserInput" />
</template>

<script>
export default new Vue ({
  data() {
    return {
      phoneNumber: '',
    }
  },
  methods: {
    handleUserInput(input) {
      var replacedInput = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
      this.value = !replacedInput[2] ? replacedInput[1] : '(' + replacedInput[1] + ') ' + replacedInput[2] + (replacedInput[3] ? '-' + replacedInput[3] : '');
    }
  }
})
</script>

【讨论】：

【解决方案3】：

介绍 Vue-The-Mask。

npm install vue-the-mask

在您的组件中

<template>
    <input v-mask="['(###) ###-####']"/>
</template>

<script>
import {mask} from 'vue-the-mask'
export default{
    name: "myComponent",
    directives:{mask}
}
</script>

【讨论】：

这很好，有很多用途

【解决方案4】：

我建议使用一些开源的 Vue 组件进行电话输入，例如：

https://github.com/LouisMazel/vue-phone-number-input

或

https://www.npmjs.com/package/vue-tel-input

它们非常易于使用，并且可以为您节省很多，因为您会浪费在制作自己的手机输入组件上。

【讨论】：

不幸的是，这对我没有帮助。实际上，我并不是要格式化电话号码，而是将其用作一个易于理解的示例，而不是冗长地描述我所拥有的非常具体的案例。
如何使用您提供的第一个链接中的组件获取格式化号码（国家代码+电话号码）？
使用 npm 安装它，按照用法中显示的方式包含它，然后像这样使用它：您还列出了可以在此组件上使用的属性为了定制它。 @IstiaqueAhmed
@N.Djokic，如何使用JS 以编程方式为第一个链接中的组件设置国家代码和电话号码？
@N.Djokic，你能在这里看看与 vee-validate 相关的问题吗：stackoverflow.com/questions/59444033/…？

【解决方案5】：

对@Satyam Pathak 代码稍作修改，以支持动态传递属性名称。

<script>
export default new Vue ({
  data() {
    return {
      objectName: {},
    }
  }
})
</script>

methods:{
formatPhoneNumber(propertyName) {
      var x = this.objectName[propertyName]
                  .replace(/\D/g, "")
                  .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);

      this.objectName[propertyName] = !x[2]
        ? x[1] : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
    }
}

【讨论】：

【解决方案6】：

我的 5 美分。假设您有一个手机型号，您希望将格式应用到该型号。

 data() {
   return {
     phone_number: null,
   };
 }

您的模板看起来像这样：

<template>
  <div>
    <input
      type="tel"
      placeholder="(123) 456-7890"
      class="form-control"
      id="input-phone"
      v-model="phone_number"
      maxlength="16"
      @input="enforcePhoneFormat()"
    />
  </div>
</template>

因此，在输入时，您调用 enforcePhoneFormat() 方法，该方法使用正则表达式并将输入转换为以下格式 - (123) 345-6789。

methods: {    
  enforcePhoneFormat() {
    let x = this.phone_number
      .replace(/\D/g, "")
      .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);

    this.phone_number = !x[2]
      ? x[1]
      : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
  }
}

当然，要更改首选格式，您必须更改正则表达式。

【讨论】：