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