在Element Plus中使用正则表达式格式化手机号的技术求助

你可以通过自定义formatter和parser函数结合正则表达式来实现需求，既保证显示格式正确，又能让绑定的v-model值保持纯数字。

实现步骤： #

1. 编写格式化函数：先过滤非数字字符，拼接固定国家码998，再用正则分组匹配替换成目标格式。
2. 编写解析函数：将格式化后的字符串还原为纯数字（去掉国家码和格式符号），确保v-model存储的是用户输入的原始数字。

修改后的完整代码： #

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

const phoneNumber = ref('')

// 格式化显示函数
const formatPhone = (value) => {
  // 过滤所有非数字字符，只保留最多9位用户输入
  const userDigits = value.replace(/\D/g, '').slice(0, 9)
  if (!userDigits) return ''
  
  // 拼接国家码，生成完整数字串
  const fullNumber = `998${userDigits}`
  // 正则分组替换为目标格式
  return fullNumber.replace(/^(\d{3})(\d{2})(\d{3})(\d{2})(\d{2})$/, '+$1-($2) $3-$4-$5')
}

// 解析函数：将格式化后的字符串转为纯数字（去掉国家码）
const parsePhone = (value) => {
  const allDigits = value.replace(/\D/g, '')
  // 返回用户输入的9位数字（去掉前缀998）
  return allDigits.slice(3)
}
</script>

<template>
  <el-input 
    v-model="phoneNumber" 
    :formatter="formatPhone" 
    :parser="parsePhone"
    placeholder="请输入手机号"
  />
</template>

说明： #

• formatPhone函数：先清理非数字内容，拼接固定国家码后，用正则将12位数字分为5组（3+2+3+2+2），替换成+998-(xx) xxx-xx-xx的格式。
• parsePhone函数：把格式化后的字符串还原为纯数字，并且去掉固定的国家码998，确保phoneNumber存储的是用户输入的9位手机号。
• 限制最多输入9位数字，避免多余内容干扰格式。

内容的提问来源于stack exchange，提问作者Muslikhiddin Mirzakhulov