vue3+ts+element-plus项目写手机号区号。以及区号+手机号校验

最新推荐文章于 2024-09-12 20:40:15 发布

Rᴜɴɪɴᴛᴏ

最新推荐文章于 2024-09-12 20:40:15 发布

阅读量900

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_68652823/article/details/140770734

版权

这里我不是直接封装的，而是使用的第三方插件。

插件具体详情地址可看链接：vue3-country-intl: 基于vue3的手机区号、国籍组件，兼容pc、移动端。vue3-country-intl有3种模式（ input、popover、modal）

一，使用插件 Vue3CountryIntl 实现区号调用

下面是我使用这个插件写的界面展示：

实现步骤：

第一步：安装该插件

npm install vue3-country-intl --save

第二步：引入该插件，使用全局引入。在main.ts中

// 选择国际区号组件的引入
import Vue3CountryIntl from 'vue3-country-intl';

// 引入css
import 'vue3-country-intl/lib/vue3-country-intl.css'

app.use(ElementPlus, {
    locale: zhCn
}).component(Vue3CountryIntl.name, Vue3CountryIntl).mount("#app")

主要看compinent()。代码

第三步：界面引用

在你需要使用到区号的界面上直接使用这个插件即可

<Vue3CountryIntl
                  id="mesDiv-Country"
                  style="width: 30px"
                  v-model="phoneCountry"
                  schema="input"
                  type="phone"
                  :searchAble="Boolean(true)"
                  :showAreaCode="true"
                  :onlyValue="Boolean(true)"
                  @change="change(phoneCountry)"
                >
                </Vue3CountryIntl>

直接引用的话，由于这个组件是有自己的宽高样式的。根据自己的需要调节就好。我的界面是使用区号/手机号input框拼成的。样式就要靠各位根据自己的需要自己调节了。

下面我们来说一下这个区号+手机号码得校验。

二，区号+手机号码校验

第一步：安装google-libphonenumber

npm install libphonenumbers --save

第二步：界面中引用：

import { PhoneNumberUtil } from "google-libphonenumber";

在你的需要用到校验的地方引入以上方法

第三步：使用

1，拿到区号

//定义接收用户选择的区号
const  phoneCountry=ref(86)
//这个方法可以查看上面截图的插件的代码上，有一个change是为了拿到当前用户选择什么区号

const change = (country: any) => {

 phoneCountry.value = country;

console.log("phoneCountry", phoneCountry.value, country);

}

2，定义方法：


//这个是写的一个方法。方便不同位置可以直接调用。
// 区号+手机号验证
const validatePhoneNumber = (phoneNumber: string): boolean => {
  const phoneUtil = PhoneNumberUtil.getInstance();
  try {
    const parsedPhoneNumber = phoneUtil.parseAndKeepRawInput(phoneNumber);
    return phoneUtil.isValidNumber(parsedPhoneNumber);
  } catch (error) {
    console.error("错误：", error);
    return false;
  }
};

3，最终使用：

// 区号回调
const change = (country: any) => {
  phoneCountry.value = country;
  const AreacodephoneNumber = "+" + country + formData.phone;
  const isValidPhoneNumber = validatePhoneNumber(AreacodephoneNumber);
  if (isValidPhoneNumber == false) {
console.log("手机号格式不正确")
}else{

console.log("手机号格式正确")
}

注意：需要注意的是，最终使用中有一个 AreacodephoneNumber 的 '+' 拼接。我拿到的数据是单独的区号和手机号。但是这个校验传递的参数格式是 "+86 xxxxxxx"