目次
数字が変更されます
あるいは、数字を別々の要素に分割することができます:
解析番号
JavaScriptの電話番号から国コードを抽出するには、Googleが提供するLibphoneNumberライブラリを活用できます。このライブラリは、電話番号を解析、フォーマット、および検証するための強力なツールであり、国コードを正確に抽出するのに理想的な選択肢となっています。開始するには、NPMを使用してライブラリをインストールし、JavaScriptファイルにインストールする必要があります。インポートしたら、PhoneNumberutilクラスを使用して電話番号を効果的に連携させることができます。
JavaScriptの国コードを使用して電話番号を検証する方法?
電話番号を国際的にフォーマットするにはどうすればよいですか?
ホームページ ウェブフロントエンド jsチュートリアル JavaScriptで電話番号を使用します

JavaScriptで電話番号を使用します

Feb 20, 2025 am 10:39 AM

JavaScriptで電話番号を使用します

ユーザーからデータを収集している場合、2つの重要な課題があります。その情報を収集し、それを検証します。一部の種類の情報は簡単です。たとえば、誰かの年齢は、収集して検証するのが実際に簡単ではありません。名前は聞こえるほど単純ではありませんが、エッジケースや国際的なバリエーションなど、パトロンニクス、モノニャス、またはハイフンの姓を持つ人だけであっても、あまり間違っていることはできません(多くのアプリケーションと多くのアプリケーションとサービスはそうします!)。電子メールアドレスは、理論的には非常に検証が非常に簡単ですが、独自の課題を抱えていますが、それでも野生には十分な正確な表現がたくさんあります。

そして、電話番号があります。これらは難しいです。本当に難しい。この記事では、電話番号の収集、検証、および表示に関する課題のいくつかについて説明します。

キーテイクアウト

電話番号は、さまざまな形式と、グローバルに番号付けシステムの動的な性質のために、プログラミングで処理するのが複雑です。
    正規表現は、その複雑さと変動のために国際的な電話番号を検証するには不十分な場合がよくあります。
  • E.164標準は、グローバルな電話番号を明確に表すために重要であり、ストレージとシステムの使用に一貫した形式を提供します。
  • GoogleのLibphonEnumberライブラリは、電話番号を解析、検証、フォーマットするための堅牢なツールであり、JavaScriptとnode.js環境の両方で使用できます。
  • INTL-TEL入力jQueryプラグインは、LibphoneNumberと統合して国際的な電話入力フィールドを効果的に処理することにより、ユーザーエクスペリエンスを向上させます。
  • 電話番号を収集し、地元の規制の順守を確保し、ユーザーの信頼と快適性を維持する際には、常に法的および使いやすさの問題を検討してください。
  • 電話番号が異なる理由
  • おそらく、電話番号はかなり厳格な形式に従う傾向があるので、次のように考えています。
  • …それらを検証するために簡単な正規表現を構築するのは簡単であるべきだということ。実際、ここに1つがあります:

さて、すぐに止めてください。まず第一に、上記の数のバリエーションをいくつか紹介します。これらはすべて完全に有効です。

<br>
202-456-1111<br>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

それに基づいて、正規表現のアパロッハは私たちが最初に考えたほど単純ではないことを知っていますが、それはその半分だけです。これらの例は、米国ベースの数字専用です。確かに、あなたが収集している数が特定の国のためのものであることを知っているなら、あなたは正規表現を使用できるかもしれません。それ以外の場合、このアプローチはそれをカットしません

電話番号に関する他の問題のいくつかを見てみましょう。彼らが私たちの仕事をさらに難しくする理由。

数字が変更されます

あらゆる種類の外部要因は、電話番号に影響を与える可能性があります。国全体が出入りし、新しい国の接頭辞を紹介します。数字の新しい分類では、プレミアムレート、ローカルレート、フリーダイヤルなどの新しい番号付けシステムが導入されています。キャリアが1セットの数字を使い果たしたとき(悲しいことにプレミアムレートなど)、彼らは単に新しいプレフィックスを導入します。

いくつかの変更には大きな意味があります。たとえば、数年前の英国では、地域の数字全体のシステム全体が劇的な変化を遂げ、ほぼすべての市外局番が追加の「1」を挿入しました。それでも、首都には微妙に異なるシステムがありました。おそらく、変化を反映するために全国で看板が変更されるまでに10年前でした。

それから、もちろん、モバイルでは大きな前例のない成長がありました。必要な電話番号の数は、大部分が世帯数に限定されていませんでしたが、何度も終わりました。利用可能な数値のプールでの継続的なひずみは、さらなる変化の可能性を高めるだけです。

国際的なダイヤルコード

番号の国際的なダイヤルコードをキャプチャすることがよくあります。場合によっては、コンテキストが必要でないことを意味する場合があります。たとえば、単一の国で操作し、電話番号が人間のオペレーターによって使用されるようにキャプチャされた場合、それらは必要ないかもしれません。ただし、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はすべて有効なコードです。必ずしも1対1のマッピングはありません。 44たとえば、英国だけでなく、マン島、ガーンジー、ジャージに使用されています。

ダイヤルする場所に応じて数字も変更する必要があります。海外から、英国の番号を呼び出すには、ダイヤルコード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で前に付けなければならないため、上記の例は次のようになります。

ありがたいことに、これらのバリエーションを回避できるようにするフォーマットがあります。
<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
e.164

幸いなことに、開発者にとっては、E.164と呼ばれる世界のどこでも、電話番号に明確で国際的に認められた基準があります。フォーマットは次のように分割されています:

電話番号には最大15桁の数字があります

    電話番号の最初の部分は国コード
  • です
  • 2番目の部分は、National Destinde Code(NDC)
  • です
  • 最後の部分はサブスクライバー番号(sn)
  • です
  • NDCとSNを一緒にまとめて、集合的に国民(重要な)番号
  • と呼ばれます
  • source

以前の数字は、e.164形式:です

例として、同じ形式を使用することができます。

<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>
ログイン後にコピー
ログイン後にコピー

E.164形式を使用して有効な電話番号を表すことができます。私たちはそれがどの国を指しているかを知っており、それは曖昧ではありません。それは保管に理想的な選択です。また、SMSプロバイダーなどのテレフォニーベースのサービスにも一般的に使用されています。 もちろん、キャッチがあります。 E.164標準は保管に最適かもしれませんが、2つのことではひどいものです。まず、事実上、その形式で自分の番号を入力または読み取る人はいません。第二に、読みやすさの点で絶望的です。後で、LibphoneNumberを見ると、人間の数字をフォーマットする方法があることがわかります。

電話番号の収集

<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、IE 10)が、古いブラウザであっても、単純に古いテキストフィールドに戻ります。

正規表現で十分であると判断する必要があります。問題があることを忘れないでください。パターン属性を使用して検証を追加できます。

マスク入力
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

マスクされた入力は、ユーザーの入力を制限したり、予想される形式に関するヒントを提供するための一般的な手法です。しかし、繰り返しますが、数字が常に特定の国のためのものであると確信できない限り、国際的なバリエーションに対応することは非常に困難です。ただし、非USユーザーに州とZIPコードを提供するように依頼することで、ユーザーを悩ませることは1つです。たとえば、特定の国の形式で数字を提供することを強制することにより、フォームを完全に使用できないものにすることはまったく別のことです。 それにもかかわらず、特定の数値が特定の範囲内にあることを知っていれば、それらは効果的です。これは、米国の電話番号のマスク入力の例です。

より良い方法

優れたjQueryプラグインの形で、電話番号を収集するためのより優れた柔軟な方法があります。以下に示されています。

ここでライブデモで再生することもできます。

JavaScriptで電話番号を使用しますの使用法は簡単です - jquery、ライブラリ、およびCSSファイルを含め、Flag Spriteが利用可能であり、CSSから適切に参照されていることを確認してください。 。

次に、要素を作成します:

最後に、次のようにそれをintializeします:

<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オプションを見ますが、まず、別の便利なライブラリを掘り下げる必要があります。 LibphoneNumberの紹介

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
幸いなことに、私たちの検証とフォーマットの苦労の多くの解決策があります。もともとAndroidオペレーティングシステム向けに開発されたGoogleのLibphonenumber Libraryは、電話番号を操作するためのあらゆる種類の方法とユーティリティを提供しています。さらに良いことに、JavaからJavaScriptに移植されているため、Webまたはnode.jsアプリケーションで使用できます。

インストール

プロジェクトホームページからライブラリをダウンロードできます - ご予想通り - Googleコード。

NPM経由で入手することもできます。これがプロジェクトページです、そしてコマンドラインからインストールするには:

bower:

を使用してインストールすることもできます

フロントエンドプロジェクトで使用することを考えている場合は、警告されてください。縮小して圧縮された場合でも、200kbを超える。

解析番号

ライブラリの主要な機能を実証するために、node.jsアプリケーションを書いていると仮定します。リポジトリに、この記事を補完するいくつかの例を見つけることができます。

最初に、phoneutil:

をインポートします

<br>
202-456-1111<br>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
これで、そのparse()メソッドを使用して電話番号を解釈できます。

これでできることがたくさんあります。最初にライブラリからいくつかの定数をインポートしましょう。要求宣言を次のように変更します
<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(つまり、2文字)の国コードであるオプションの2番目のパラメーターを取ります。

もう一度ラインを試してみると、今回は「私たち」を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>
ログイン後にコピー
数字の検証

検証は同様のパターンに従います。繰り返しますが、2番目のオプションの引数がありますが、国が暗示されていない場合に必要なものです。

ここに有効な数字の例がいくつかあります。ここでは、国コードが2番目の引数として提供されるか、最初の引数に含まれています。

<br>
011 44 20 7925 0918<br>
ログイン後にコピー

カントリーコードを提供しない場合、または暗示されていない場合、以前と同じエラーが発生します。

ここに、検証が失敗し、falseを返す例がいくつかあります:

ただし、無効な数字が例外を投げることができるので、
<br>
+12024561111<br>
ログイン後にコピー
に注意してください:

<br>
+442079250918<br>
ログイン後にコピー
数字のタイプの決定

時々、電話番号の

タイプ

を知ることが役立ちます。たとえば、携帯電話番号が提供されていることを確認することができます。たとえば、2要素認証を実装するなど、SMSメッセージを送信する予定です。
<span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span></span>
ログイン後にコピー
ライブラリのgetNumberType()関数はまさにそれを行います。見てみましょう。

関数は、その議論として解析された電話番号を取得します:

<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.premium_rate
  • pnt.shared_cost
  • pnt.voip
  • pnt.personal_number
  • pnt.pager
  • pnt.uan
  • pnt.unknown
  • ご覧のとおり、Pnt.unknownは、必ずしも情報を確実に収集できないという事実を反映しています。要約すると、この機能は簡単な初期チェックとして役立ちますが、それに頼ることはできません。
  • サービスの数は?
  • です
検証するが使用されていない電話番号がたくさんあります。彼らは切断されているか、まだ割り当てられていないかもしれません、あるいはおそらくSIMカードがトイレに降ろされたかもしれません。

数字が単に有効ではなくアクティブであることを確認する必要がある場合は、多くのオプションがあります。

1つのアプローチは、ユーザーがメールアドレスを確認する必要があるのとほぼ同じ方法で、ユーザーが自分の番号を確認することを要求することです。 Twilioなどのサービスを使用してSMSを送信したり、電話をかけたりすることもできます。

Twilioを使用してSMSによる確認コードを生成および送信するための非常にシンプルなコードスニペットを次に示します。

それから、ユーザーにWebアプリのフォームにコードを入力して確認するように依頼するのは簡単な演習です。

BytePlantからのこのようなものなど、リアルタイムで数字が使用されているかどうかを確認する(有料)サービスもあります。

その他の問題

legal

個人情報と同様に、注意すべき法的問題もたくさんあります。たとえば、英国では、電話選好サービス(TPS)は、マーケティングコミュニケーションを受けたくない人々によって明示的に登録されている電話番号の全国登録簿です。このようなレジスタに対する番号を確認するためにAPIを提供する有料サービスがあります。

ユーザビリティの考慮事項
<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>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

単一のフォームで最大3つの異なる電話番号を要求することは非常に一般的です。たとえば、昼間、夕方、モバイル また、インターネット上で電話番号を尋ねると、かなり邪魔になる可能性があることを覚えておく価値があります。あなたがそれを必要な分野にしたにもかかわらず、誰かがその情報を提供したくない場合、彼らはおそらく2つのことのいずれかを行うでしょう:

  • 検証を「だます」試みます。アプローチに応じて、「Ex Directory」のようなものを入力するか、無効な数値を入力する場合があります。
  • 去る。
  • JQueryプラグインとlibphoneNumber
を組み合わせる

jQueryプラグインには、utilsscriptと呼ばれるかなりゆったりと名付けられたオプションがあることを覚えているかもしれません。

このオプションを使用すると、LibphoneNumberの検証と書式の機能を活用できます。ドロップダウンを使用するか、ダイヤルコードを入力することで国を選択した場合、テキストフィールドをその国の番号付け形式を反映するマスクされた入力に変換します。

プラグインには、libphoneNumberのパッケージ版が含まれています。次のように、このファイルへのパスをコンストラクターに渡します。

前述したように、LibphoneNumberライブラリのファイルサイズにより、このアプローチは注意して使用する必要があることに留意してください。ただし、ここでコンストラクタで参照することは、オンデマンドでロードできることを意味します。

電話番号の表示

<br>
202-456-1111<br>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
pnf.internationalやpnf.nationalなどの形式を使用して、より「フレンドリー」になるように表示するときに数値をフォーマットする方法を調べました。

電話番号とコールプロトコルを使用して、モバイルサイトで役立つ特にハイパーリンクを追加することもできます。これにより、ユーザーはWebページから直接番号をダイヤルできます。 これを行うには、リンク自体のE.164形式が必要です。

もちろん、LibphoneNumber LibraryのFormat()メソッドを使用して、E.164バージョン(PNF.E164)とよりユーザーフレンドリーなディスプレイバージョンの両方をレンダリングできます。

microdata

マイクロダタを使用して、電話番号を意味的にマークアップすることもできます。これが例です。リンクをマークアップするには、itemprop = "電話"の使用に注意してください

要約

この記事では、電話番号であるホーネッツの巣を開きました。今では、あらゆる種類の複雑さ、微妙さ、ゴッチャがあり、それらを収集、検証、表示する必要がある場合に注意する必要があることはかなり明らかです。
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
数字を収集するためのいくつかの方法を調べました - 「Tel」入力タイプ、マスクされた入力、最後にIntl-Tel入力jQueryプラグイン。

次に、検証に関する問題のいくつかを調べました。特に国際に行く場合、正規表現などの一般的なアプローチがしばしば不十分である理由を調べました。

GoogleのLibphoneNumber Libraryを見てみましょう。それを使用して、電話番号の種類を解析、検証、表示、および決定します。

INTL-TEL入力プラグインをLibphonEnumberと組み合わせて、パフォーマンスの面で犠牲を払っているものの、さらに優れたユーザーエクスペリエンスを実現しました。

最後に、HTMLで電話番号をマークアップする方法を見ました。

電話番号を扱うために作成する推奨事項がいくつかあります:

  • あなたが単一の国でのみ活動していない限り、国際的な違いに注意してください。
  • マスクされた入力を注意して使用します。
  • 正規表現ベースの検証には非常に注意してください 可能であれば、e.164を使用してストレージに使用します。
  • GoogleのLibphphoneNumber Libraryを使用してください
  • 番号を表示する場合は、可能な場合はフォーマットして、tel:またはcallto:link typeを使用して、microdataを使用します。
  • JavaScriptの電話番号に関する
  • faq
  • JavaScriptの電話番号から国のコードを取得する方法?

JavaScriptの電話番号から国コードを抽出するには、Googleが提供するLibphoneNumberライブラリを活用できます。このライブラリは、電話番号を解析、フォーマット、および検証するための強力なツールであり、国コードを正確に抽出するのに理想的な選択肢となっています。開始するには、NPMを使用してライブラリをインストールし、JavaScriptファイルにインストールする必要があります。インポートしたら、PhoneNumberutilクラスを使用して電話番号を効果的に連携させることができます。

電話番号から国コードを抽出するには、最初にParse関数を使用して電話番号を解析する必要があります。この関数は、電話番号を文字列およびオプションのデフォルトの領域コードとして取得します。これは通常、ISO 3166-1 Alpha-2カントリーコードです。解析後、PhoneNumberオブジェクトにアクセスし、getCountryCodeメソッドを使用して整数として国コードを取得できます。このアプローチは、国際的な電話番号の処理の正確性を保証し、さまざまな地域形式を考慮しています

JavaScriptの国コードを使用して電話番号を検証する方法?

​​

JavaScriptの国コードを使用して電話番号を検証することは、さまざまな国際的な電話番号形式のために複雑なタスクになる可能性があります。正確な検証を確保するために、1つの効果的なアプローチは、Googleによる「LibphoneNumber」ライブラリを使用することです。このライブラリは、電話番号を解析、フォーマット、および検証するための包括的なツールを提供しているため、この目的のために信頼できる選択肢になります。 。インポートしたら、図書館のPhoneNumberutilクラスを活用して電話番号の検証を実行できます。具体的には、isValidNumber関数を使用すると、解析された電話番号を検証できます。これは、番号が有効であるかfalseでない場合はtrueを返すことができます。図書館の機能を使用して電話番号を解析することにより、提供された国コードに関連付けられた特定の形式とルールに準拠していることを確認してください。さまざまな形式と標準で国際的な電話番号を処理します。 「libphoneNumber」ライブラリを実装することにより、JavaScriptアプリケーションでの電話番号検証の精度と信頼性を大幅に向上させることができます。 JavaScriptの電話番号から国コードを分離することは、特に国際的な電話番号を扱う場合、一般的なタスクです。実用的なアプローチには、正規表現と文字列操作の使用が含まれます。カントリーコードに一致するように正規表現パターンを定義できます。これは、通常、1桁以上のプラス記号として表されます。 (d)などの正規表現は、電話番号から国のコードを効率的にキャプチャします。
正規表現パターンを設定したら、Execメソッドを使用して電話番号に適用できます。 Execメソッドは、電話番号の一致した部分とキャプチャされたグループを含む配列を返します。この場合、キャプチャされた国コードには、配列の最初のグループからアクセスできます(インデックス1)。このプロセスに従うことにより、国コードを電話番号から正確に分離し、JavaScriptアプリケーションでさらに使用できるようにすることができます。この方法は汎用性が高く、さまざまな電話番号形式で作業することができます。ユーザーの入力を扱うか、外部ソースから電話番号を処理するかにかかわらず、このアプローチにより、国のコードを確実に抽出できるようになります。これは、国際的な電話番号を扱うための貴重なステップです。

電話番号を国際的にフォーマットするにはどうすればよいですか?

国際的な使用のために電話番号をフォーマットすることは、さまざまな地域で明確さと互換性を確保するために不可欠です。国際的にフォーマットされた電話番号は、通常、国コード、市外局番(該当する場合)、および現地の電話番号の3つの主要なコンポーネントで構成されています。国コードは、米国の1などの数値コードが続くプラス記号()で表されます。これは、国または地域の普遍的に認識されている識別子として機能します。
場合によっては、面積コードが含まれる場合があります。ローカルの電話番号が続きます。これには、長さが異なる場合があり、追加のセパレーターまたは句読点が含まれる場合があります。特定の形式は国間で異なる可能性があるため、利用可能な場合は現地の慣習に従うことが重要です。この構造を順守することにより、電話番号が容易に認識できるようにし、国際的な国境を越えて使用できるようにします。

以上がJavaScriptで電話番号を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

See all articles