国际手机号码正则校验

思路:

  1. 使用国际号码校验工具 Libphonenumber
  2. 保存一个全球国家代号与电话区号JSON数据用于查找相应的代号去匹配校验规则

具体实现:

一、下载libphonenumber.js

    npm i libphonenumber-js

二、新建一个JSON文件保存全球国家代号与电话区号数据

下面会用到一个countryCode,这时需要引入一个country.json去查找相应的countryCode image.png 该json下载地址:gitee.com/tangying_cn…

三、新建一个国家&地区列表页

引入上面保存的json文件渲染 image.png

四、在需要校验手机号的页面使用

1. 增加电话区号选择来判断使用哪个国家的号码(第三点的国家&地区列表页选择) image.png

2. 在使用页面引入libphonenumber-js

import PhoneNumber from 'libphonenumber-js'
  1. 在表单中设置校验rules
rules: {
    'phone': [{
        required: true,
        message: this.$t('login9'),
        trigger: ['change', 'blur'],
    },
    {
        validator: (rule, value, callback) => {
             // 传入电话号码和国家地区代码(例如:'US' 表示美国)
             //const phoneNumber = PhoneNumber(电话号码, 'US') 
            const phoneNumber = PhoneNumber(value, this.country.countryCode)
            return phoneNumber.isValid()
        },
        message: this.$t('login11'),
        trigger: ['change', 'blur'],
    }]
 }

这样就大功告成啦!记录一下防止以后一点印象都没了