Vue.js 通过元素加中的正则表达式输入电话号码格式

发布于10月24日

对于微小但非常令人沮丧的问题，如果能得到一些帮助，将不胜感激.我正在与Element Plus库一起进行Vue项目. 用户输入:‘123456789’ 我需要:‘+998-(12)345-67-89

元素加上有格式化程序，但我需要它与正则表达式.不幸的是，我很难让它发挥作用. https://element-plus.org/en-US/component/input.html#formatter个

我现在只查了一下号码，想不出更多了

<script setup>
import { ref, unref } from 'vue'
import { ElInput } from 'element-plus'

const phoneNumber = ref('')
</script>
<template>
  <el-input v-model="phoneNumber" :formatter="(value) => value.replace(/\D/g, '')" />
</template>

推荐答案

您可以使用以下正则表达式:

value.replace(/^\+998|\D/g, '').replace(/^(\d{1,2})(\d{1,3})?(\d{1,2})?(\d{1,2})?.*/, (m, g1, g2, g3, g4) => `+998-(${g1})` + (g2 ? `-${g2}` : '') + (g3 ? `-${g3}` : '') + (g4 ? `-${g4}` : '')))

第一个.replace(/^\+998|\D/g, '')删除字符串开头的+998(这是通过成功的后续替换添加的)和任何非数字字符，而replace(/^(\d{1,2})(\d{1,3})?(\d{1,2})?(\d{1,2})?.*/, (m, g1, g2, g3, g4) => `+998-(${g1})` + (g2 ? `-${g2}` : '') + (g3 ? `-${g3}` : '') + (g4 ? `-${g4}` : ''))仅在必要时添加-来重新格式化数字.