Vue JS - 反应式电话号码格式

Question

我有一个带有电话号码输入的表单，我希望在用户主动输入号码时将号码格式更改为相关的电话号码格式。有人可以指导我如何在 JS 和 vue 3 中实现这一点吗？

AppointmentForm.vue - 这是我的主要组件

<div class="form-control">
    <label class="form-input" for="telNumber">Telefoonnummer (optioneel)</label>
        <input v-model="telNumber" 
        :class="{ 'input-error': numberError }"
        @input="numberFormatting"
        id="telNumber"
        type="tel"
        placeholder="Vul uw telefoonnummer in"
        class="field-input">
    <div v-if="numberError" class="validation-error">
        <span class="error-message">Voer een bestaand nummer in</span>
    </div>
</div>

在我的脚本中，我运行了一个基本的验证函数来验证数字，但它可能与这种情况并不真正相关。

setup(props) {
    const telNumber = ref("");
    const numberError = ref(false);

    // Run validate form to check whether the data is added
    function validateForm() {
        if (telNumber.value !== '') {
            const numbers = /^[0-9]+$/;
            if(!telNumber.value.match(numbers)) {
                numberError.value = true;
            } else {
               numberError.value = false;
            }
        } else {
            numberError.value = false;
        }
        if (numberError.value) {
            AnalyticsHandler.userSendForm(true);
        } else if (!numberError.value) {    
            sendEmail();
        } 
    }

Answer 1

您可以使用名为 maska 的与 vue3 兼容的第 3 方库

我自己尝试过实现这些东西，但出于时间和功能的考虑，我发现只使用那个库会更容易。

如果您想制定自己的解决方案，诀窍在于输入/更改以将值替换为您使用正则表达式匹配/替换解析的值。 （它在 vanilla js 中，但很容易为 vue3 更新）

function formatPhone(str) {
  return str
    .replace(/\D/g, '')
    .replace(/^(\d{1})(\d{3})(\d{3})(\d{4})/g, "$1 ($2) $3 $4")
    .replace(/^(\d{1})(\d{3})(\d{3})(\d*)/g, "$1 ($2) $3 $4")
    .replace(/^(\d{1})(\d{3})(\d{1,3})/g, "$1 ($2) $3")
    .replace(/^(\d{1})(\d{1,3})/g, "$1 ($2")
    .substring(0, 16)
    .trim();
}

document.querySelector("#phone").addEventListener("input",
  function onUpdate(e) {
    var pos = e.target.selectionStart - e.target.value.length;
    var formatted = formatPhone(e.target.value);
    if(formatted.length > 0 && formatted.length < 16) {e.target.classList.add('err')}
    else {e.target.classList.remove('err')}
    e.target.value = formatted;
    e.target.selectionStart = pos+ e.target.value.length;
    e.target.selectionEnd = pos+ e.target.value.length;
  }
)

input{
  min-width: 260px;
  display:block;
  border-radius:4px;
  border: 2px solid #3366FF;
  padding: 8px 6px;
  margin: 0 0.2rem 0.8rem 0;
  box-sizing: border-box;
}

input.err {
  border-color: red;
}

<input id="phone" placeholder="#(###) ### ####">

更新（vue 版本）

const formatPhone = (str) => str
  .replace(/\D/g, '')
  .replace(/^(\d{1})(\d{3})(\d{3})(\d{4})/g, "$1 ($2) $3 $4")
  .replace(/^(\d{1})(\d{3})(\d{3})(\d*)/g, "$1 ($2) $3 $4")
  .replace(/^(\d{1})(\d{3})(\d{1,3})/g, "$1 ($2) $3")
  .replace(/^(\d{1})(\d{1,3})/g, "$1 ($2")
  .substring(0, 16)
  .trim();

Vue.createApp({
  data() {
    const numberFormatting = (e)=>telNumber.value = formatPhone(e.target.value);
    const telNumber = Vue.ref('');
    const numberError = Vue.computed(()=>telNumber.value.length > 0 && telNumber.value.length < 16)
    return {telNumber, numberError, numberFormatting}
  },
}).mount('#app')

.field-input{display:block; border: 2px solid #CCC; padding:0.4em;border-radius:0.4em}.input-error{border-color:tomato} .error-message{color:tomato}

<script src="https://unpkg.com/vue@3.0.7/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="form-control">
    <label class="form-input" for="telNumber">Telefoonnummer (optioneel)</label>
    <input v-model="telNumber" 
           :class="{ 'input-error': numberError }"
           @input="numberFormatting"
           id="telNumber"
           type="tel"
           placeholder="Vul uw telefoonnummer in"
           class="field-input">
    <div v-if="numberError" class="validation-error">
      <span class="error-message">Voer een bestaand nummer in</span>
    </div>
  </div>
</div>