JavaScript で正規表現を使用して電話番号を検証する

プラトン再発行

フォロワー： 0

概要

意識しているかどうかに関係なく、データは私たちの日常生活の重要な部分になっています。オンラインでのフードの注文からキャットフードの検索まで、私たちは常にデータを送受信しています。 Web アプリケーションの開発者として、データベースがデータを正しく理解し、アプリケーションの堅牢性を維持できるように、ユーザー入力が指定された形式であることを確認する責任があります。

電話番号の検証は、データがデータベース全体で一貫した形式で保存されることを保証するため、重要です。たとえば、ユーザーは電話番号の前に国コードを入力する必要があるかどうかを明確にする必要があるかもしれません。適切な検証が行われていれば、ユーザーはそれが必要かどうかを簡単に判断できます。同様に、ユーザーに何を期待するかを理解し、それに応じてロジックを実装できるため、一貫した形式によりユーザーエクスペリエンスが向上します。データの不一致により後の段階でコードが破損すると、ユーザーのエクスペリエンスは低下します。

正規表現は、パターンマッチングのための強力なツールです。これらは、ユースケースに応じて、さまざまなタイプのパターンに一致する柔軟性を提供します。さらに、正規表現は言語に依存しないため、コア検証を簡単に統合できるため、検証ロジックの移植性が高まります。 JavaScript で正規表現を扱うのは簡単な作業です。

この記事は、正規表現の力を使用してアプリケーションの電話番号を検証する方法を理解するのに役立ちます。国コードを含む電話番号を検証する簡単な JavaScript 関数を作成します。

正規表現とは何ですか?

簡単に言えば、正規表現は、指定された文字列内の事前定義されたパターンと一致します。これはプログラミング言語で広く使用されており、主に特定の形式の入力を検証するために使用されます。さらに、正規表現は、指定されたパターンの検索、分割、置換によく使用されます。

ドキュメント内で電子メールアドレスを検索したいとします。電子メールアドレスは、特定のアドレスではなく、任意のアドレスにすることができます。電子メールアドレスの構造はすでにわかっているため、簡単な式を作成すると、パターンをすぐに見つけることができます。

正規表現では、特殊文字を使用してさまざまな種類のパターンを示します。例えば：

. (ドット) は、任意の文字と一致する特殊文字です。
* (アスタリスク) は、前の文字と 0 回以上一致します。
+ (プラス) は、前の文字と XNUMX 回以上一致します。
? (疑問符) は、前の文字をオプションにします。
[abc] いずれかの文字と一致します a, bまたは c.
(abc) キャラクターをグループ化します。
^ (キャレット) は行の先頭と一致します。
$ (ドル) は行末と一致します。

これらはほんの一部です。さらに深く掘り下げて、より多くのパターンについて学びたい場合は、以下を参照してください。 Microsoft からのこのドキュメント.

指定された一連の数値が XNUMX 桁の郵便番号であるかどうかを確認する正規表現を作成してみましょう。式の記述を開始するには、 ^ (キャレット) 記号は行の先頭と一致します。正規表現では、 d 任意の数字と中括弧内の数字に一致します ({}) は、中括弧内に指定された回数だけ、前の要素と一致します。上記のリストから、次のことがわかります。 $ 行末を一致させるために使用されます。

この情報を組み合わせると、次のような正規表現が得られます。

/^d{5}$/

ここで、式をよりよく理解するために、下の図を調べてみましょう。

XNUMX桁の郵便番号と一致する正規表現

XNUMX 桁の郵便番号に一致する正規表現

正規表現とその一般的な構造の基本を理解したので、これらの式を JavaScript 関数でどのように実装できるかを検討してみましょう。

JavaScript正規表現

JavaScriptは最も人気のあるプログラミング言語開発者の間では。ほとんどすべての Web アプリケーションは JavaScript を必要とするため、この言語で正規表現がどのように使用できるかを理解することが重要です。

JavaScriptでは、 RegExp オブジェクトはパターンマッチングに使用されます。このオブジェクトは次の XNUMX つの方法で利用できます。

リテラル表記を使用し、パターンが XNUMX つのスラッシュで囲まれた形式に設定されます。
コンストラクター表記を使用します。ここで、文字列または RegExp オブジェクトが渡されます

リテラル表記は次のように簡単に使用できます。

const expr = /^d{5}$/i;

一方、コンストラクター表記では、 RegExp コンストラクターを使用してそのインスタンスを作成します。その様子は次のとおりです。

const expr = new RegExp(/^d{5}$/, "i");

RegExp オブジェクトの詳細については、 MDN の公式ドキュメント。ここで、電話番号検証の重要性と電話番号のさまざまなコンポーネントについて見てみましょう。

電話番号の検証とコンポーネント

電話番号をデータベースに保存する場合、クライアント側で電話番号を検証することが重要です。適切に検証しないと、コードが予期しない動作を示す可能性があります。

ベストプラクティス、業界で認められた標準、および含まれているチートシートを含む、Gitを学習するための実践的で実用的なガイドを確認してください。グーグルGitコマンドを停止し、実際に学ぶそれ！

たとえば、電話番号とともに国コードを必要とするサービスを使用しているが、検証が不十分なためにユーザーが国コードを含めていないとします。今、あなたが持っているのは番号だけです無し国コードが原因で、SMS テキストメッセージを送信するサービスが失敗する可能性があります。これは単なる XNUMX つの仮説的なシナリオです。他の問題によっては、アプリケーションがクラッシュする可能性もあります。フロントエンドでデータを適切に処理し、データベース全体にクリーンで一貫性のあるデータを確実に保存することが重要です。

一般に、電話番号は次の XNUMX つの部分で構成されます。

国コード: 最初の 1 ～ 3 桁 (国によって異なります) は、電話番号の国を定義します。このコードにより、通話を正しい国にルーティングできます。国コードを 0 で始めることはできません。

現在編集中の記事のタイトルは「JavaScript で正規表現を使用して電話番号を検証する」です。編集するテキストの部分:

市外局番: 市外局番またはダイヤル番号とも呼ばれる、番号のこの部分は、通話を国内の正しい地理的エリアにルーティングするのに役立ちます。米国など一部の国では、市外局番が特定のサービスの特定の電話番号セットを示すこともあります。さらに、北米では、市外局番を 0 または 1 で始めることはできません。
電話プレフィックス: この一連の番号は、電話会社によって特定の中央局または電話交換局に割り当てられ、特定の地理的エリアまたは近隣をさらに絞り込みます。
回線番号: これは、プレフィックスエリア内の家庭または企業の特定の電話回線に割り当てられる一意の番号です。通常、番号のこの部分により、国、地域、プレフィックス内の各電話番号が一意であることが保証されます。

国番号を除いた残りの部分を結合すると、市外局番と電話番号がそれぞれ XNUMX 桁、回線番号が XNUMX 桁の XNUMX 桁の電話番号になります。

次に、正規表現を使用してこれらの基準に基づいて電話番号を検証する JavaScript 関数の作成に移りましょう。

電話番号検証用の正規表現を作成する

電話番号の基本構造はすでに理解しました。また、正規表現とそれを JavaScript で使用する方法についても学びました。このセクションでは、指定された形式の電話番号を検証する単純な JavaScript 関数を作成します。

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

たとえば、関数に有効な電話番号は次のようになります。 +123-456-789-1234ではない +012-123-456-7890 or +12-123-456-789, これらの電話番号は、前に説明した電話番号のルールに従っていないためです。

それでは、正規表現の作成に移りましょう。まず、国番号が 1 ～ 3 桁の長さで、ゼロで始まらないかどうかを確認しましょう。

正規表現の開始を示すには、キャレット (^)、先頭にプラスが存在することを検証します。この目的のために、使用しましょう +、これは先頭にプラスが存在することと一致します。ここで、国コードの桁が XNUMX ～ XNUMX 桁であり、最初の桁がゼロでないことを確認するには、次のように記述します。 [1-9]{1}[0-9]{0,2}。ここに、 [1-9]{1} 1 から 9 までの任意の数字が XNUMX 回だけ存在できることを指定します。また、同様に、 [0-9]{0,2} は、0 ～ 9 の任意の数字が XNUMX ～ XNUMX 回存在できることを示します。

区切り文字として、 - 数字のセクションの間には (ハイフン) を入れます。一 - 国コードの検証後に追加できます。したがって、この時点での正規表現は次のようになります。

^+[1-9]{1}[0-9]{0,2}-$

　 $ at the end は行の終わりを指定します。さて、市外局番の場合、これは非常に似ています。市外局番を XNUMX または XNUMX で始めることはできません。したがって、最初の部分は次のようになります [2-9]{1}。これは、最初の数値が 2 ～ 9 であることと一致します。この一致は XNUMX 回だけ発生します。次に、コードの残りの部分については次のように記述できます。 [0-9]{2}。これにより、最初の桁の後に正確に 0 桁が存在し、各桁の範囲が 9 ～ XNUMX になることが保証されます。再度、最後にハイフン区切り文字を追加します。

完全な正規表現は次のようになります。

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

もう一度同じパターンを使用して電話プレフィックスを確認してみましょう。電話プレフィックスも XNUMX や XNUMX で始めることはできないと仮定しましょう。したがって、追加すると、 [2-9]{1}[0-9]{2} ハイフンをもう一度入れると、次のような式になります。

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

現時点で残っている唯一の部分は行番号です。これは長さ XNUMX 桁の任意の数字にすることができます。これは他のものよりも簡単です。その表現は、 [0-9]{4}.

完全な式は次のとおりです。

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

中括弧が頻繁に使用されていることにお気づきでしょう。これらは、中括弧内に指定されたインスタンスと一致するために使用されます。特定の数字の場合は、次のようになります {1}の場合、前のパターンに XNUMX 回だけ一致します。ただし、範囲の場合は、次のようになります {0, 2}、一致の最小数と最大数を定義します。したがって、次の場合、 {0, 2}、パターンと最低 XNUMX 回、最大 XNUMX 回一致します。

パターンが完成しました。これで、正規表現を使用して電話番号が有効かどうかを確認する簡単な JavaScript 関数を作成できるようになりました。関数は次のとおりです。

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234");

機能は非常に簡単です。電話番号を入力として受け取ります。正規表現パターンは、という変数内に保存されます。 pattern。パターンは RegExp コンストラクターを使用してインスタンス化され、式をパラメーターとしてコンストラクターに渡します。次に、次を使用して電話番号をテストします。 test オブジェクトで使用できるメソッド。 if-else ステートメントを使用して、電話番号がテストに合格するかどうかを確認します。存在する場合、true を返し、次のことを示すコンソールメッセージを送信します。 Phone number is valid。それ以外の場合は、false を返し、電話番号が無効であることを示すコンソールメッセージを表示します。

これで準備完了です。これで、電話番号が有効かどうかをテストできます。