目录
数字更改
>捕获数字的国际拨号代码通常很重要。在某些情况下,上下文可能意味着不需要。例如,如果您在一个国家 /地区运营,并且将捕获电话号码以被人类操作员使用,则可能不需要它们。但是,对于任何远程自动化的东西(例如发送SMS消息)或有效地验证它们,您需要捕获国家前缀。
>有一种以出色的jQuery插件的形式收集电话号码的更好,更灵活的方法。下面说明了。
>安装
>解析数字
返回值是在Phonenumbertype子模块中定义的常数 - 您会记得我们需要将其作为pnf。
如果您需要确保一个数字不仅有效,而且还活跃,则有许多选项对您打开。
>非常常见的是,以单一形式要求多达三个不同的电话号码;例如白天,晚上和手机。
>还值得记住的是,通过互联网询问电话号码可能会遇到相当侵入性。如果某人不愿意提供该信息,尽管您将其设置为必需的领域,那么他们可能会做两件事之一:
>将jQuery插件与libphoneNumber
>
为了从电话号码中提取国家代码,您应该首先使用Parse功能解析电话号码。此功能将电话号码作为字符串和可选的默认区域代码,通常是ISO 3166-1 Alpha-2国家代码。解析后,您可以访问Phonenumber对象并使用GetCountryCode方法作为整数获取国家代码。这种方法可确保处理国际电话号码的准确性,并考虑到各种区域格式
>如何在JavaScript中使用国家代码的电话号码验证?
>如何将国家代码与JavaScript中的国家代码分开?将国家代码与JavaScript中的电话号码分开是一项常见的任务,尤其是在处理国际电话号码时。一种实用的方法涉及使用正则表达式和弦操作。您可以定义正则表达方式以匹配国家代码,该代码通常表示为加号,然后是一个或多个数字。正则表达式(例如(d))有效地从电话号码中捕获了国家代码。
我如何在国际上格式化我的电话号码?
首页 web前端 js教程 在JavaScript中使用电话号码

在JavaScript中使用电话号码

Feb 20, 2025 am 10:39 AM

在JavaScript中使用电话号码

>当您从用户那里收集数据时,面临两个关键挑战。收集这些信息并验证它。某些类型的信息很简单 - 例如,某人的年龄并不是更简单的收集和验证。名字并不像听起来那样简单,但可以为您提供边缘案例和国际变化的餐饮(例如,顾客,手提义,甚至是具有连字符的姓氏的人),您不会出错(尽管很多应用程序和大量的应用程序和服务可以!)。电子邮件地址虽然从理论上讲非常容易验证,但面临着自己的挑战 - 但是,野外有很多正则表达不太正确。

,然后有电话号码。这些很难。真的很难。在本文中,我将讨论有关收集,验证和显示电话号码的一些挑战。

钥匙要点

由于其各种格式以及全球编号系统的动态性质,电话号码在编程中很复杂。

正则表达式通常不足以验证国际电话号码,因为它们的复杂性和可变性。
  • > e.164标准对于明确表示全局电话号码至关重要,为存储和系统使用提供了一致的格式。
  • > Google的LibphoneNumber库是用于解析,验证和格式化电话号码的强大工具,可用于JavaScript和Node.js Environments。
  • > INTL-TEL输入jQuery插件通过与LibphoneNumber集成以有效处理国际电话输入字段,从而增强了用户体验。
  • >在收集电话号码,确保遵守本地法规并保持用户信任和舒适性时,请始终考虑法律和可用性问题。
  • >
  • 为什么电话号码有所不同
  • 也许您在想,由于电话号码往往遵循非常严格的格式,例如:

…应该简单地构建一个简单的正则表达式来验证它们。实际上,这是一个:

>

<br>
202-456-1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
好吧,就在那里。对于初学者来说,这里只是上面数字的一些变体,所有这些都完全有效:

因此,基于这一点,我们知道正则表达式不像我们首先想到的那样简单 - 但这只是其中的一半。这些示例仅适用于美国的数字。当然,如果您知道要收集的数字将用于特定国家 /地区,则可以使用正则表达式。否则,这种方法将不会削减。

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>让我们看一下有关电话号码的其他一些问题,以及为什么它们使我们的工作变得更加努力。

数字更改

>各种外部因素可能对电话编号有影响。整个国家来来去去,引入了新的国家前缀。数字的新分类引入了新的编号系统 - 高级速率,本地利率,免费电话等。当运营商用完一组数字(可悲的是,高级利率)时,他们只是引入了一个新的前缀。

一些变化具有巨大的影响;例如,在几年前的英国,整个区域编号系统都发生了巨大的变化,几乎每个区域代码都插入了其他“ 1”。即使那样,首都也有一个微妙的系统。在全国范围内更改标牌以反映变化大概是十年的。

当然,移动设备中有巨大和前所未有的增长。不再需要电话号码的数量在很大程度上仅限于家庭数量,而是多次。可用数字池的持续压力只会增加进一步变化的可能性。

国际拨号代码

>捕获数字的国际拨号代码通常很重要。在某些情况下,上下文可能意味着不需要。例如,如果您在一个国家 /地区运营,并且将捕获电话号码以被人类操作员使用,则可能不需要它们。但是,对于任何远程自动化的东西(例如发送SMS消息)或有效地验证它们,您需要捕获国家前缀。

国家图书馆包含许多地理信息,其中包括国际拨号代码。这是来自国家 /地区的摘录。

如您所见,这表明奥地利使用国际拨号代码43. >

那么我们如何使用此信息?好吧,使用lodash(或下划线)的魔法,我们可以通过几种方式查询与代码相关的信息。

> 例如,要找出给定的拨号代码是否有效:>
<br>
202-456-1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

当然,

有更效率的方法可以做到这一点。

我们可以查找使用特定拨号代码的国家 /地区:

>

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>最后,我们可以获取给定国家 /地区的拨号代码:

>

>您会在文章附带的存储库中找到这些功能作为模块以及单元测试。

。 但是,即使是国际拨号代码,也并不像您想象的那样简单。格式可以变化 - 1,43,962 1868都是有效的代码。不一定是一对一的映射; 44例如,不仅用于英国,还用于马恩岛,根西岛和泽西岛。
<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
还必须根据拨号的位置更改数字。从国外,要拨打英国号码,您需要丢弃带拨号代码44的前面零和前缀:

<br>
202-456-1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
…变成…

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>您也可以用双零替换“”:

>

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
使事情变得更复杂,有些数字在从一个国家 /地区召唤的情况下会有所不同,具体取决于您从哪个国家 /地区拨打的国家 /地区。例如,在美国,数字也必须以美国退出代码011为前缀,因此上面的示例变为:>

幸运的是,我们可以使用一种格式,使我们能够解决这些变化。

> e.164
<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>
登录后复制
登录后复制
登录后复制
幸运的是,对于开发人员而言,

有一个明确的,国际公认的电话号码,是世界上任何地方的电话号码,名为E.164。格式分解如下:

>

电话号码最多可以有15位数字

电话号码的第一部分是国家代码
    >
  • 第二部分是国家目的地代码(NDC)
  • 最后一部分是订户编号(sn)
  • NDC和SN一起被共同称为国家(重要)数字>
  • > source
  • 以前是E.164格式的数字:>

我们可以使用相同的格式,例如一个基于伦敦的英国号码:>

>我们可以使用e.164格式表示任何有效的电话号码。我们知道它指的是哪个国家,而且毫无意义 - 使其成为存储的理想选择。它也通常用于基于电话的服务(例如SMS提供商),正如我们稍后会看到的。

>当然有一个渔获。 E.164标准可能非常适合存储,但对于两件事来说很可怕。首先,几乎没有人会以这种格式输入或读取其号码。其次,就其可读性而言,它是绝望的。但是,稍后,当我们看一下libphonenumber时,我们会发现有一些格式化数字的方法。
<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>
登录后复制
登录后复制
登录后复制
>

收集电话号码

首先,让我们看一下收集电话号码的问题。

>
<span>/**
</span><span>* Gets a list of countries with the specified dialing code
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return array An array of two-character country codes
</span></span><span>*/
</span><span>getCountries : function(code) {
</span><span>var countryEntries = _.filter(data, function(country){
</span><span>return (_.contains(country.callingCode, code));
</span><span>})
</span><span>return _.pluck(countryEntries, 'cca2');
</span><span>}</span>
登录后复制
登录后复制
> html5和“ tel”输入

> HTML5引入了一种新的“ TEL”输入类型。但是,由于格式的变化问题,它实际上并没有对用户可以输入的内容施加任何限制,也不会以与电子邮件元素相同的方式执行任何验证。但是,有一些优点 - 在移动网站上使用用户的电话键盘通常会显示,而不是常规的键盘布局。>

您可以使用单个元素来收集一个数字:

或者,您可以将数字分解为单独的元素:

<br>
202-456-1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

>浏览器支持非常好(例如,Chrome 6,Firefox 4,Safari 5,即10),但是即使在较旧的浏览器中,它也只会落到一个普通的旧文本字段。

>我们是否应该确定正则表达式足够 - 请记住,存在问题 - 然后我们可以使用模式属性添加一些验证:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>屏蔽输入

>掩盖的输入是限制用户输入或提供预期格式的提示的常见技术。但是,再说一次,除非您确信数字总是适合一个特定国家,否则很难迎合国际变化。但是,通过做出假设来惹恼用户是一回事 - 要求非US用户提供状态和邮政编码。使一个完全无法使用的形式是另一回事,例如,强迫人们以某种​​国家的格式提供数字。

但是,如果您知道某些数字将在特定范围内,则它们可以有效。这是给我们电话号码的蒙版输入的示例。

更好的方法

>有一种以出色的jQuery插件的形式收集电话号码的更好,更灵活的方法。下面说明了。

在JavaScript中使用电话号码>您也可以在此处进行现场演示。

>用法很简单 - 确保您已包括jQuery,库和CSS文件,并且Flag Sprite可用并从CSS中正确引用 - 您会在build/img/flags.png中找到它。 。

接下来,创建一个元素:

最后,将其注入如下:
<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

>有关配置选项的完整列表,请咨询文档。稍后,我们将查看Utilsscript选项,但首先,我们需要深入研究另一个有用的库。
<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>
登录后复制
登录后复制
登录后复制
介绍性libphonenumber

幸运的是,我们许多验证和格式的困境都有解决方案。 Google的LibphoneNumber库最初是为Android操作系统开发的,提供了各种方法和用户用于使用电话号码的方法。更好的是,它已从Java移植到JavaScript,因此我们可以在Web或Node.js应用程序中使用它。

>

>安装

>您可以从项目主页上下载库,如您所期望的 - Google Code。

您也可以通过NPM获得它。这是项目页面,然后从命令行安装:

您也可以使用Bower安装它:

<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>
登录后复制
登录后复制
登录后复制

如果您正在考虑在前端项目中使用它,但是要警告 - 即使缩小和压缩,它也超过200kb。

>解析数字

为了演示库的主要功能,我将假设您正在编写Node.js应用程序。您可以在存储库中找到一些补充本文的示例代码。

>

首先,导入Phoneutil:

现在,您可以使用其parse()方法来解释电话号码:>
<br>
202-456-1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

我们可以做很多事情。让我们首先从图书馆导入一些常数。将您的要求声明更改为以下内容:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

现在我们可以执行以下操作:

>
<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

的输出将如下:

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>
登录后复制
登录后复制
登录后复制

现在尝试在没有国际拨号代码的情况下解析数字:>

<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>
登录后复制
登录后复制
登录后复制

这将抛出以下例外:

<span>/**
</span><span>* Gets a list of countries with the specified dialing code
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return array An array of two-character country codes
</span></span><span>*/
</span><span>getCountries : function(code) {
</span><span>var countryEntries = _.filter(data, function(country){
</span><span>return (_.contains(country.callingCode, code));
</span><span>})
</span><span>return _.pluck(countryEntries, 'cca2');
</span><span>}</span>
登录后复制
登录后复制

这是因为没有解释数字是为哪个国家,就无法解释。 parse()方法采用可选的第二个参数,即ISO 3166-1 alpha-2(即两个字符)国家代码。

如果您再次尝试这条线,但是这次将“我们”作为第二个论点,您会发现结果与以前一样:

<span>/**
</span><span>* Gets the dialing codes for a given country
</span><span>*
</span><span>* <span>@param string country The two-character country code
</span></span><span>* <span>@return array An array of strings representing the dialing codes
</span></span><span>*/
</span><span>getCodes : function(country) {
</span><span>// Get the country entry
</span><span>var countryData = _.find(data, function(entry) {
</span><span>return (entry.cca2 == country);
</span><span>});
</span><span>// Return the code(s)
</span><span>return countryData.callingCode;
</span><span>}</span>
登录后复制

>您也可以使用这些格式来玩法;所有这些也将起作用:

<br>
020 7925 0918<br>
登录后复制

解释英国编号:

<br>
+44 20 7925 0918<br>
登录后复制

>这将输出以下内容:

<br>
0044 20 7925 0918<br>
登录后复制

>分解一个数字后,您可以对其进行验证 - 正如我们在下一部分中所看到的。

验证一个数字

<br>
011 44 20 7925 0918<br>
登录后复制
>验证遵循类似的模式;同样,有第二个可选的论点,但是如果没有暗示该国家 /

这是一些有效数字的示例,其中将国家代码作为第二个参数提供,或者包含在第一个参数中:

如果您不提供国家代码,或者不含义,则会遇到与以前相同的错误:

以下是一些示例,其中验证失败,返回false:
<br>
+12024561111<br>
登录后复制

但是,请警告

,因为一个无效的数字可能会引发例外:

<br>
+442079250918<br>
登录后复制

确定数字类型

有时,知道电话号码的 type 很有用。例如,您可能希望确保为您提供了一个手机号码 - 也许您打算发送SMS消息,例如实施两因素身份验证 - 或尝试淘汰高级费率号。

库的getNumberType()函数就是这样。让我们看看
<span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span></span>
登录后复制

该函数将解析的电话号码作为参数:

<span><!-- area code and number -->
</span><span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span>
</span><span><!-- country code, area code and number -->
</span><span><span><span><input</span> type<span>="tel"</span> name<span>="country"</span> size<span>="4"</span>></span> <span><span><input</span> type<span>="tel"</span> name<span>="area"</span> size<span>="6"</span>></span> <span><span><input</span> type<span>="tel"</span> name<span>="number"</span> size<span>="8"</span>></span>
</span><span><!-- US-style -->
</span>(<span><span><span><input</span> type<span>="tel"</span> size<span>="3"</span>></span>) <span><span><input</span> type<span>="tel"</span> size<span>="3"</span>></span> - <span><span><input</span> type<span>="tel"</span> size<span>="4"</span>></span></span>
登录后复制

返回值是在Phonenumbertype子模块中定义的常数 - 您会记得我们需要将其作为pnf。

作为一个例子,让我们查询有关的数字是移动电话还是固定行:>

<br>
202-456-1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>似乎是主题的主题,自然会有一个收获。有时,即使是LibphoneNumber库也无法确定。例如,我们的数字不能轻易区分;因此,常数pnt.fixed_line_or_mobile。

>我们只需要更改我们的示例代码即可反映这种不确定性:>

也有许多其他可能性。这是当前的完整列表:
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制

pnt.fixed_line
  • > pnt.mobile
  • pnt.fixed_line_or_mobile
  • > pnt.toll_free
  • pnt.prem_rate
  • > pnt.shared_cost
  • pnt.voip
  • > pnt.personal_number
  • > pnt.pager
  • > pnt.uan
  • > pnt.inknown
  • 如您所见,PNT.Inknown反映了这样一个事实,即我们不一定会以任何确切的方式收集任何信息。因此,总而言之,尽管此功能可以作为快速初始检查有用,但我们不能依靠它。
  • 是服务中的数字吗?
>

>有很多电话号码可以验证,但不使用。他们可能已经断开连接,尚未分配,或者也许已经放下了厕所。

如果您需要确保一个数字不仅有效,而且还活跃,则有许多选项对您打开。

>

>一种方法是要求用户确认其电话号码,与您可能要求用户确认其电子邮件地址的方式几乎相同。您可以使用Twilio之类的服务发送SMS,甚至可以打电话。

>

这是一个非常简单的代码段,用于使用Twilio通过SMS生成和发送确认代码

>然后,要求用户将代码输入您的Web应用程序中的表单以验证它是一个琐碎的练习 - 或者您甚至可以允许人们通过回复消息来验证其数字。

>也有(付费)服务,可以检查一个数字是否实时为您服务,例如Byteplant。

其他问题

<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
法律

与任何个人信息一样,也有很多法律问题要注意。例如,在英国,电话偏好服务(TPS)是全国电话号码登记册,已由不希望接收营销通信的人们进行了解释。有付费服务提供API来检查针对此登记册的数字。

>可用性注意事项

>非常常见的是,以单一形式要求多达三个不同的电话号码;例如白天,晚上和手机。

>还值得记住的是,通过互联网询问电话号码可能会遇到相当侵入性。如果某人不愿意提供该信息,尽管您将其设置为必需的领域,那么他们可能会做两件事之一:

  • 试图“欺骗”验证。根据方法,它们可能会键入“ Ex Directory”或输入无效的数字,例如仅包含数字的数字。
  • >
  • 走开。

>将jQuery插件与libphoneNumber

组合

>您可能还记得jQuery插件具有一个名为utilsscript的较神秘的选项。

此选项使我们能够利用LibphoneNumber的验证和格式化功能。选择一个国家(使用下拉列表或键入拨号代码)之后,它将将文本场转换为蒙版的输入,以反映该国家的编号格式。

该插件包含libphoneNumber包装的版本;如下:

<br>
202-456-1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
正如我之前提到的,请记住,由于LibphoneNumber库的文件大小,应谨慎使用此方法。但是,在构造函数中在此处引用它确实意味着可以按需加载。

显示电话号码

>我们研究了如何使用pnf.international和pnf.national等格式显示在显示更“友好”时如何格式化数字。

>我们还可以使用TEL和CALLTO协议将超链接添加到电话号码上,这些电话号码在移动网站上特别有用 - 允许用户直接从网页拨打一个数字。

> 为此,我们需要链接本身的e.164格式 - 例如:

>

当然,您可以使用LibphoneNumber库的格式()方法来渲染e.164版本(pnf.e164)和更具用户友好的显示版本。

microdata

>我们还可以使用MicroDATA以语义标记电话号码。这是一个例子;请注意使用itemprop =“电话”来标记链接:
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>

摘要

在本文中,我们打开了黄蜂巢是电话号码。到目前

我们已经研究了一些用于收集数字的方法 - “ TEL”输入类型,掩盖输入和INTL-TEL输入jQuery插件。 然后,我们查看了有关验证的一些问题,以及为什么诸如正则表达式之类的常见方法通常不足,尤其是当您国际化时。

我们看了Google的LibphoneNumber图书馆;使用它来解析,验证,显示和确定电话号码的类型。

>
<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>我们将INTL-TEL输入插件与LibphoneNumber相结合,以获得更好的用户体验,尽管它以性能为代价。

>

>最后,我们研究了如何在HTML中标记电话号码。我将为处理电话号码提出一些建议:>
    除非您仅在一个国家 /地区开展业务,否则请注意国际差异。
  • 使用谨慎的蒙版输入。
  • >
  • 对基于正则表达的验证非常小心。
  • >在可能的情况下,使用e.164进行存储。
  • 使用Google的LibphoneNumber图书馆。
  • 显示数字时,将其格式化时,使用TEL:或CALLTO:链接类型,并使用Microdata。
  • 关于JavaScript中的电话号码的常见问题
  • >如何从JavaScript中的电话号码中获取国家代码?

>

>从JavaScript中的电话号码中提取国家代码,您可以利用Google提供的LibphoneNumber库。该库是用于解析,格式化和验证电话号码的强大工具,使其成为准确提取国家代码的理想选择。要开始,您需要使用NPM安装库,然后将其导入到JavaScript文件中。导入后,您可以使用Phonenumberutil类有效地使用电话号码。

为了从电话号码中提取国家代码,您应该首先使用Parse功能解析电话号码。此功能将电话号码作为字符串和可选的默认区域代码,通常是ISO 3166-1 Alpha-2国家代码。解析后,您可以访问Phonenumber对象并使用GetCountryCode方法作为整数获取国家代码。这种方法可确保处理国际电话号码的准确性,并考虑到各种区域格式

>

>如何在JavaScript中使用国家代码的电话号码验证?

>由于各种国际电话号码格式,在JavaScript中验证使用国家代码的电话号码可能是一项复杂的任务。为了确保准确的验证,一种有效的方法是使用Google使用“ LibphoneNumber”库。该库提供了用于解析,格式化和验证电话号码的全面工具,使其成为为此目的的可靠选择。
要开始使用,您需要使用NPM安装“ LibphoneNumber”库,然后将其导入到JavaScript文件中。导入后,您可以利用图书馆的Phonenumberutil类执行电话号码验证。具体来说,ISVALIDNUMBER函数允许您验证一个解析的电话号码,如果该号码有效或错误,则返回true。通过使用图书馆的功能来解析电话号码,您可以确保其遵守与所提供的国家 /地区代码相关的特定格式和规则。
此方法为使用国家 /地区代码验证电话号码提供了强大的解决方案,提供了准确的手段处理具有不同格式和标准的国际电话号码。通过实施“ LibphoneNumber”库,您可以显着提高JavaScript应用程序中电话号码验证的精确性和可靠性。

>如何将国家代码与JavaScript中的国家代码分开?将国家代码与JavaScript中的电话号码分开是一项常见的任务,尤其是在处理国际电话号码时。一种实用的方法涉及使用正则表达式和弦操作。您可以定义正则表达方式以匹配国家代码,该代码通常表示为加号,然后是一个或多个数字。正则表达式(例如(d))有效地从电话号码中捕获了国家代码。

>

一旦您拥有正则表达式模式,就可以使用EXEC方法将其应用于电话号码。 EXEC方法返回包含电话号码的匹配部分和任何捕获组的数组。在这种情况下,可以从数组中的第一组访问捕获的国家代码(索引1)。通过遵循此过程,您可以准确地将国家代码与电话号码分开,并可以在JavaScript应用程序中进一步使用。

此方法用途广泛,并且可以适应各种电话号码格式。无论您是处理用户输入还是从外部来源处理电话号码,此方法都可以确保您可以可靠地提取国家代码,这是使用国际电话号码的宝贵一步。

我如何在国际上格式化我的电话号码?

>格式化电话号码以确保不同地区的清晰度和兼容性至关重要。国际格式的电话号码通常由三个主要组件组成:国家代码,区域代码(如果适用)和本地电话号码。国家代码以加号()为代表,然后是数字代码,例如美国的1。它是该国或地区的普遍认可的标识符。
在某些情况下,可能包括区域代码,通常与空间或连字符的数字分开。以下是本地电话号码,该号码的长度可能会有所不同,并且可能包含其他分离器或标点符号。国家之间的特定格式可能会有所不同,因此重要的是在可用的情况下遵循当地惯例。通过遵守此结构,您可以确保在国际边界中易于识别和可用的电话号码。

以上是在JavaScript中使用电话号码的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

前端开发中如何实现类似 VSCode 的面板拖拽调整功能? 前端开发中如何实现类似 VSCode 的面板拖拽调整功能? Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

See all articles