ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで電話番号を使用します
ユーザーからデータを収集している場合、2つの重要な課題があります。その情報を収集し、それを検証します。一部の種類の情報は簡単です。たとえば、誰かの年齢は、収集して検証するのが実際に簡単ではありません。名前は聞こえるほど単純ではありませんが、エッジケースや国際的なバリエーションなど、パトロンニクス、モノニャス、またはハイフンの姓を持つ人だけであっても、あまり間違っていることはできません(多くのアプリケーションと多くのアプリケーションとサービスはそうします!)。電子メールアドレスは、理論的には非常に検証が非常に簡単ですが、独自の課題を抱えていますが、それでも野生には十分な正確な表現がたくさんあります。
そして、電話番号があります。これらは難しいです。本当に難しい。この記事では、電話番号の収集、検証、および表示に関する課題のいくつかについて説明します。キーテイクアウト
さて、すぐに止めてください。まず第一に、上記の数のバリエーションをいくつか紹介します。これらはすべて完全に有効です。
<br> 202-456-1111<br>
それに基づいて、正規表現のアパロッハは私たちが最初に考えたほど単純ではないことを知っていますが、それはその半分だけです。これらの例は、米国ベースの数字専用です。確かに、あなたが収集している数が特定の国のためのものであることを知っているなら、あなたは正規表現を使用できるかもしれません。それ以外の場合、このアプローチはそれをカットしません
電話番号に関する他の問題のいくつかを見てみましょう。彼らが私たちの仕事をさらに難しくする理由。あらゆる種類の外部要因は、電話番号に影響を与える可能性があります。国全体が出入りし、新しい国の接頭辞を紹介します。数字の新しい分類では、プレミアムレート、ローカルレート、フリーダイヤルなどの新しい番号付けシステムが導入されています。キャリアが1セットの数字を使い果たしたとき(悲しいことにプレミアムレートなど)、彼らは単に新しいプレフィックスを導入します。
いくつかの変更には大きな意味があります。たとえば、数年前の英国では、地域の数字全体のシステム全体が劇的な変化を遂げ、ほぼすべての市外局番が追加の「1」を挿入しました。それでも、首都には微妙に異なるシステムがありました。おそらく、変化を反映するために全国で看板が変更されるまでに10年前でした。それから、もちろん、モバイルでは大きな前例のない成長がありました。必要な電話番号の数は、大部分が世帯数に限定されていませんでしたが、何度も終わりました。利用可能な数値のプールでの継続的なひずみは、さらなる変化の可能性を高めるだけです。
国際的なダイヤルコード
ご覧のとおり、これはオーストリアが国際ダイヤルコード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桁の数字があります
以前の数字は、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>
より良い方法
優れたjQueryプラグインの形で、電話番号を収集するためのより優れた柔軟な方法があります。以下に示されています。
ここでライブデモで再生することもできます。
の使用法は簡単です - 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アプリケーションで使用できます。
インストール
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>
例として、問題の番号がモバイルであるか固定行かを照会しましょう。
<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
数字が単に有効ではなくアクティブであることを確認する必要がある場合は、多くのオプションがあります。
1つのアプローチは、ユーザーがメールアドレスを確認する必要があるのとほぼ同じ方法で、ユーザーが自分の番号を確認することを要求することです。 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つのことのいずれかを行うでしょう:
このオプションを使用すると、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を見てみましょう。それを使用して、電話番号の種類を解析、検証、表示、および決定します。電話番号を扱うために作成する推奨事項がいくつかあります:
JavaScriptの国コードを使用して電話番号を検証することは、さまざまな国際的な電話番号形式のために複雑なタスクになる可能性があります。正確な検証を確保するために、1つの効果的なアプローチは、Googleによる「LibphoneNumber」ライブラリを使用することです。このライブラリは、電話番号を解析、フォーマット、および検証するための包括的なツールを提供しているため、この目的のために信頼できる選択肢になります。 。インポートしたら、図書館のPhoneNumberutilクラスを活用して電話番号の検証を実行できます。具体的には、isValidNumber関数を使用すると、解析された電話番号を検証できます。これは、番号が有効であるかfalseでない場合はtrueを返すことができます。図書館の機能を使用して電話番号を解析することにより、提供された国コードに関連付けられた特定の形式とルールに準拠していることを確認してください。さまざまな形式と標準で国際的な電話番号を処理します。 「libphoneNumber」ライブラリを実装することにより、JavaScriptアプリケーションでの電話番号検証の精度と信頼性を大幅に向上させることができます。 JavaScriptの電話番号から国コードを分離することは、特に国際的な電話番号を扱う場合、一般的なタスクです。実用的なアプローチには、正規表現と文字列操作の使用が含まれます。カントリーコードに一致するように正規表現パターンを定義できます。これは、通常、1桁以上のプラス記号として表されます。 (d)などの正規表現は、電話番号から国のコードを効率的にキャプチャします。
正規表現パターンを設定したら、Execメソッドを使用して電話番号に適用できます。 Execメソッドは、電話番号の一致した部分とキャプチャされたグループを含む配列を返します。この場合、キャプチャされた国コードには、配列の最初のグループからアクセスできます(インデックス1)。このプロセスに従うことにより、国コードを電話番号から正確に分離し、JavaScriptアプリケーションでさらに使用できるようにすることができます。この方法は汎用性が高く、さまざまな電話番号形式で作業することができます。ユーザーの入力を扱うか、外部ソースから電話番号を処理するかにかかわらず、このアプローチにより、国のコードを確実に抽出できるようになります。これは、国際的な電話番号を扱うための貴重なステップです。
国際的な使用のために電話番号をフォーマットすることは、さまざまな地域で明確さと互換性を確保するために不可欠です。国際的にフォーマットされた電話番号は、通常、国コード、市外局番(該当する場合)、および現地の電話番号の3つの主要なコンポーネントで構成されています。国コードは、米国の1などの数値コードが続くプラス記号()で表されます。これは、国または地域の普遍的に認識されている識別子として機能します。
場合によっては、面積コードが含まれる場合があります。ローカルの電話番号が続きます。これには、長さが異なる場合があり、追加のセパレーターまたは句読点が含まれる場合があります。特定の形式は国間で異なる可能性があるため、利用可能な場合は現地の慣習に従うことが重要です。この構造を順守することにより、電話番号が容易に認識できるようにし、国際的な国境を越えて使用できるようにします。
以上がJavaScriptで電話番号を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。