如何获取用户当前位置并生成国际拨号前缀+验证不同国家的手机号格式

TeresaPeng_zju

已于 2023-02-24 21:29:17 修改

阅读量888

点赞数

分类专栏： javascript web前端文章标签： javascript 前端 vue.js

于 2023-02-24 21:13:41 首次发布

本文链接：https://blog.csdn.net/m0_46339022/article/details/129208124

版权

web前端同时被 2 个专栏收录

18 篇文章 3 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

文章目录

前言
一、引入并启用API
二、js和html页面代码
- 1.js代码
- 2.html代码
三、将原生js写在vue项目中

前言

该demo使用了HTML5的Geolocation API和Google Maps API来获取用户的位置信息，应用libphonenumber库将位置信息转换为国际拨号前缀并在页面默认展示，同时能够严格验证246个国家的手机号格式。如果感兴趣的话可以看下去~

一、引入并启用API

首先，需要在index.html中引入libphonenumber库和Google Maps API，代码如下;

<!-- 引入google map api -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCP1J2D4-toI4JzUtebVSK3_NAzsydF218"></script>
  <!-- 引入Libphonenumber api -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.9.21/libphonenumber-js.min.js"></script>

其中，YOUR_API_KEY应替换为我们自己的Google Maps API密钥。

获取方式为前往https://console.cloud.google.com/，新建项目-API和服务-凭据-创建凭据-API密钥。复制并进行替换。

替换后还需要在该页面搜索并启用以下两个API，否则会报错：

![在这里插入图片描述](https://img-blog.csdnimg.cn/619b1966ea214ce284c677e24a4b57af.png

二、js和html页面代码

1.js代码


// 获取用户的位置-检查是否支持Geolocation API
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  console.log("Geolocation is not supported by this browser.");
}

// 处理成功获取位置的情况
function success(position) {
  // 获取用户的经纬度
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;

  // 使用Google Maps API将经纬度转换为地址
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({ 'location': { lat: lat, lng: lng } }, function (results, status) {
    if (status === 'OK') {
      // 解析地址中的国家代码
      var countryCode = results[0].address_components.filter(c => c.types.includes('country'))[0].short_name;

      // 监听“验证”按钮的点击事件，验证手机号码
      var button = document.getElementById('validate-button');
      button.addEventListener('click', function () {
        var phoneNumber = libphonenumber.parse(document.getElementById('phone-number').value, countryCode);
        var isValidNumber = libphonenumber.isValidNumber(phoneNumber);
        var formattedNumber = libphonenumber.formatNumber(phoneNumber, 'E.164');

        // 将验证结果显示在页面上
        var result = "The phone number " + formattedNumber + " is " + (isValidNumber ? "valid" : "invalid") + ".";
        document.getElementById('phone-validation-result').innerHTML = result;
      });
    } else {
      console.log('Geocode was not successful for the following reason: ' + status);
    }
  });
}

// 处理获取位置失败的情况
function error() {
  console.log("Unable to retrieve your location.");
}

2.html代码

<body>
  <!-- 在页面中添加一个input输入框 -->
  <input type="text" id="phone-number" placeholder="Enter a phone number">
  <!-- 在页面中添加一个“验证”按钮 -->
  <button id="validate-button">Validate</button>
  <!-- 在页面中添加一个元素，用于显示验证结果 -->
  <p id="phone-validation-result"></p>
</body>

三、将原生js写在vue项目中

<template>
  <div>
    <!-- 使用v-model指令绑定手机号码 -->
    <input type="text" v-model="phoneNumber" placeholder="Enter a phone number">

    <!-- 使用按钮来触发验证 -->
    <button @click="validatePhoneNumber">Validate</button>

    <!-- 在页面中添加一个元素，用于显示验证结果 -->
    <p>{{ validationStatus }}</p>
  </div>
</template>

<script>
import libphonenumber from 'libphonenumber-js';

export default {
  data() {
    return {
      phoneNumber: '', // 用于绑定输入框的手机号码
      countryCode: '', // 用于存储用户所在国家的国家代码
      validationStatus: '', // 用于显示验证结果的字符串
    };
  },
  mounted() {
    // 获取用户所在的国家代码
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.getCountryCode, this.handleGeolocationError);
    } else {
      console.log('Geolocation is not supported by this browser.');
    }
  },
  methods: {
    // 处理获取位置信息的情况
    getCountryCode(position) {
      // 获取用户的经纬度
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;

      // 使用Google Maps API将经纬度转换为地址
      const geocoder = new window.google.maps.Geocoder();
      geocoder.geocode({ 'location': { lat: lat, lng: lng } }, (results, status) => {
        if (status === 'OK') {
          // 解析地址中的国家代码
          this.countryCode = results[0].address_components.filter(c => c.types.includes('country'))[0].short_name;
        } else {
          console.log('Geocode was not successful for the following reason: ' + status);
        }
      });
    },
    // 处理获取位置信息失败的情况
    handleGeolocationError() {
      console.log('Unable to retrieve your location.');
    },
    // 验证手机号码是否有效
    validatePhoneNumber() {
      const phoneNumber = libphonenumber.parse(this.phoneNumber, this.countryCode);
      const isValidNumber = libphonenumber.isValidNumber(phoneNumber);
      const formattedNumber = libphonenumber.formatNumber(phoneNumber, 'E.164');

      // 将验证结果显示在页面上
      this.validationStatus = `The phone number ${formattedNumber} is ${isValidNumber ? 'valid' : 'invalid'}.`;
    },
  },
};

p.s. 需要先在项目中安装libphonenumber库！

TeresaPeng_zju

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何获取用户当前位置并生成国际拨号前缀+验证不同国家的手机号格式

该demo使用了HTML5的Geolocation API和Google Maps API来获取用户的位置信息，应用libphonenumber库将位置信息转换为国际拨号前缀并在页面默认展示，同时能够严格验证246个国家的手机号格式。如果感兴趣的话可以看下去~
复制链接

扫一扫