前端开发中常用的表单项之一就是手机号码输入框，在全球化的环境下，不同国家和地区的手机号码格式也会有所不同，处理起来就需要专门的工具。intl-tel-input-rmt 就是一个优秀的 npm 包，可以非常方便地实现不同格式的手机号码输入框。本文将详细介绍 intl-tel-input-rmt 的使用方法。
安装和引入
使用 npm 安装 intl-tel-input-rmt：
npm install --save intl-tel-input-rmt
在你的代码中使用 require 或 import 引入：
const intlTelInput = require('intl-tel-input-rmt');
import intlTelInput from 'intl-tel-input-rmt';使用
HTML 结构
使用 intl-tel-input-rmt 的第一步是在 HTML 中定义一个输入框，并为其分配一个 ID：
<input type="tel" id="phone">
JavaScript 初始化
在 JavaScript 中，最基本的初始化方法是创建一个 intlTelInput 实例，并将其绑定到输入框上：
const input = document.querySelector('#phone');
intlTelInput(input);这段代码会在输入框旁边渲染一个下拉框，包含了国家和地区的列表。当用户选择一个国家或地区时，相应的手机号码格式也会被应用到输入框中。
国家和地区列表
默认情况下，intl-tel-input-rmt 会渲染一个国家和地区列表，并将输入框默认设置为当前地区的手机号码格式。如果需要修改这个列表，可以实例化一个 intlTelInput 的时候传递一个选项对象：
intlTelInput(input, {
allowDropdown: false,
excludeCountries: ['us', 'gb'],
preferredCountries: ['cn', 'jp']
});allowDropdown 表示是否允许下拉框，excludeCountries 则表示不需要显示的国家和地区列表，preferredCountries 表示在下拉框中优先显示的国家和地区。更多选项可以查看文档。
手机号码校验
intl-tel-input-rmt 提供了一个 isValidNumber 方法，可以校验输入框中的手机号码是否有效：
const input = document.querySelector('#phone');
const iti = intlTelInput(input);
if (!iti.isValidNumber()) {
alert('Invalid phone number!');
}获取和设置手机号码
要获取输入框中的手机号码，可以使用 getNumber 方法：
const input = document.querySelector('#phone');
const iti = intlTelInput(input);
const phoneNumber = iti.getNumber();phoneNumber 是一个 E.164 格式的手机号码字符串。
要设置输入框中的手机号码，可以使用 setNumber 方法：
const input = document.querySelector('#phone');
const iti = intlTelInput(input);
iti.setNumber('+8613588888888');示例代码
下面是一个完整的示例代码，可以直接在浏览器中运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ----------
----- ---------------- -----------------------------------------------------------------------------------------
-------
------
------ ---------- -----------
------- -----------------------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------
--------
------------ -
----- ----- - ---------------------------------
------------------- -
--------------- -----
----------------- ----
---
----- --------- - ----------------------------------
----------------------------------- ---------- -
----- --- - --------------------
----- ----------- - ----------------
-------------------
---
---
---------
-------
-------在这个示例代码中，我们使用了：
- jQuery 来更方便地获取页面元素；
- 自动初始化的 initialCountry，将输入框默认设置为中国地区；
- separateDialCode，要求用户输入区号。
运行示例代码，在输入框中输入一个手机号码，点击提交按钮，就可以在弹出框中看到该手机号码的 E.164 格式了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac669e1