思路:
- 使用国际号码校验工具 Libphonenumber
- 保存一个全球国家代号与电话区号JSON数据用于查找相应的代号去匹配校验规则
具体实现:
一、下载libphonenumber.js
npm i libphonenumber-js
二、新建一个JSON文件保存全球国家代号与电话区号数据
下面会用到一个countryCode,这时需要引入一个country.json去查找相应的countryCode
该json下载地址:gitee.com/tangying_cn…
三、新建一个国家&地区列表页
引入上面保存的json文件渲染
四、在需要校验手机号的页面使用
1. 增加电话区号选择来判断使用哪个国家的号码(第三点的国家&地区列表页选择)
2. 在使用页面引入libphonenumber-js
import PhoneNumber from 'libphonenumber-js'
- 在表单中设置校验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'],
}]
}