تحقق من صحة أرقام الهاتف في JavaScript باستخدام التعبيرات العادية

المُقدّمة

سواء أدركت ذلك أم لا ، فقد أصبحت البيانات جزءًا مهمًا من حياتنا اليومية. من طلب الطعام عبر الإنترنت إلى البحث عن طعام القطط ، فإننا نرسل ونستقبل البيانات باستمرار. بصفتنا مطورين لتطبيقات الويب ، تقع على عاتقنا مسؤولية ضمان أن تكون مدخلات المستخدم بالتنسيق المحدد بحيث تفهم قاعدة البيانات البيانات بشكل صحيح ، ويظل التطبيق قويًا.

يعد التحقق من صحة رقم الهاتف أمرًا مهمًا لأنه يضمن حفظ البيانات بتنسيق ثابت في جميع أنحاء قاعدة البيانات. على سبيل المثال ، قد يحتاج المستخدمون إلى توضيح حول ما إذا كان ينبغي عليهم إدخال رمز البلد قبل رقم هاتفهم. مع إجراء التحقق المناسب ، يمكن للمستخدمين بسهولة تحديد ما إذا كان ذلك مطلوبًا. وبالمثل ، تتحسن تجربة المستخدم بتنسيق ثابت ، كما تعلم ما يمكن توقعه من المستخدمين ويمكنك تنفيذ المنطق وفقًا لذلك. ستكون تجربة سيئة للمستخدمين إذا انكسر الكود في مرحلة لاحقة بسبب البيانات غير المتسقة.

التعبيرات العادية هي أدوات فعالة لمطابقة الأنماط. أنها توفر المرونة لمطابقة الأنماط من أنواع مختلفة ، اعتمادًا على حالة الاستخدام الخاصة بك. بالإضافة إلى ذلك ، تعتبر التعبيرات العادية حيادية اللغة ، مما يجعل منطق التحقق الخاص بك أكثر قابلية للنقل ، حيث يمكنك بسهولة دمج التحقق الأساسي من الصحة. يعد العمل مع regex في JavaScript مهمة مباشرة.

ستساعدك هذه المقالة في فهم كيفية استخدام قوة التعبيرات العادية للتحقق من صحة أرقام الهواتف لتطبيقك. ستكتب دالة JavaScript بسيطة للتحقق من صحة أرقام الهواتف برموز البلدان.

ما هو التعبير العادي؟

بعبارات بسيطة ، يطابق التعبير العادي نمطًا محددًا مسبقًا في سلسلة معينة. يتم استخدامه على نطاق واسع في لغات البرمجة ويتم استخدامه بشكل أساسي للتحقق من صحة مدخلات تنسيق معين. علاوة على ذلك ، تُستخدم التعبيرات النمطية بشكل شائع للبحث عن أنماط محددة وتقسيمها واستبدالها.

لنفترض أنك تريد العثور على عنوان بريد إلكتروني في مستند. يمكن أن يكون عنوان البريد الإلكتروني أي عنوان ، وليس عنوانًا محددًا. ستساعدك كتابة تعبير بسيط في العثور على النمط بسرعة لأنك تعرف بالفعل بنية عنوان البريد الإلكتروني.

يستخدم التعبير العادي أحرفًا خاصة للإشارة إلى أنواع مختلفة من الأنماط. على سبيل المثال:

• . (النقطة) هي حرف خاص يمكن أن يتطابق مع أي حرف.
• * (علامة النجمة) تطابق الحرف السابق 0 أو أكثر من المرات.
• + (علامة الجمع) تطابق الحرف السابق مرة واحدة أو أكثر.
• ? (علامة الاستفهام) تجعل الحرف السابق اختياريًا.
• [abc] يتطابق مع أي من الأحرف a, bالطرق أو c.
• (abc) تجمع الشخصيات معًا.
• ^ (علامة الإقحام) تطابق بداية السطر.
• $ (الدولار) يطابق نهاية السطر.

هذه ليست سوى عدد قليل. إذا كنت تريد الغوص بشكل أعمق والتعرف على المزيد من الأنماط ، يمكنك الرجوع إلى هذا المستند من Microsoft.

دعونا نبني تعبيرًا عاديًا يتحقق مما إذا كانت مجموعة معينة من الأرقام عبارة عن رمز بريدي مكون من خمسة أرقام. لبدء كتابة التعبير ، سنستخدم ^ (علامة الإقحام) ، لأنها تطابق بداية السطر. في التعبير النمطي ، d يتطابق مع أي رقم ، ورقم داخل الأقواس المتعرجة ({}) يطابق العنصر السابق بالضبط عدد المرات المعطاة داخل الأقواس. من القائمة أعلاه ، نعلم ذلك $ يستخدم لمطابقة نهاية السطر.

بدمج هذه المعلومات ، نحصل على تعبير عادي مثل هذا:

/^d{5}$/

الآن ، دعنا نفحص الرسم أدناه لفهم التعبير بشكل أفضل.

تعبير عادي لمطابقة الرمز البريدي المكون من خمسة أرقام

الآن بعد أن أصبح لدينا فهم أساسي للتعبيرات النمطية وبنيتها العامة ، فقد حان الوقت لاستكشاف كيفية تنفيذ هذه التعبيرات في وظيفة JavaScript.

تعبيرات جافا سكريبت العادية

جافا سكريبت هو ملف لغة البرمجة الأكثر شعبية بين المطورين. نظرًا لأن جميع تطبيقات الويب تقريبًا تتطلب JavaScript ، فمن الضروري فهم كيفية استخدام التعبيرات العادية في هذه اللغة.

في JavaScript ، فإن ملف RegExp يتم استخدام الكائن لمطابقة النمط. يمكن استخدام هذا الكائن بطريقتين:

• باستخدام التدوين الحرفي ، حيث يتم تنسيق النمط بين شريحتين مائلتين للأمام
• باستخدام تدوين المُنشئ ، حيث تكون إما سلسلة نصية أو ملف RegExp تم تمرير الكائن

يمكن استخدام التدوين الحرفي على النحو التالي:

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

من ناحية أخرى ، مع تدوين المنشئ ، ستحتاج إلى استخدام ملحق RegExp المُنشئ لإنشاء مثيل له. إليك كيف تبدو:

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

يمكنك قراءة المزيد حول كائن RegExp من ملف مستندات MDN الرسمية. الآن ، دعنا نستكشف أهمية التحقق من صحة رقم الهاتف والمكونات المختلفة لرقم الهاتف.

التحقق من صحة رقم الهاتف والمكونات

يعد التحقق من صحة أرقام الهواتف من جانب العميل أمرًا بالغ الأهمية عند حفظ أرقام الهواتف في قاعدة البيانات الخاصة بك. بدون التحقق المناسب من الصحة ، قد تظهر التعليمات البرمجية الخاصة بك سلوكيات غير متوقعة.

على سبيل المثال ، افترض أنك تستخدم خدمة تتطلب رمز البلد إلى جانب رقم الهاتف ، لكن المستخدمين لديك لا يدرجونها بسبب نقص التحقق من الصحة. الآن ، لديك الرقم فقط بدون رمز البلد ، وقد تفشل الخدمة التي ترسل رسائل نصية قصيرة SMS بسبب ذلك. هذا مجرد سيناريو افتراضي واحد. يمكن أن تؤدي المشكلات الأخرى إلى تعطل تطبيقك. من الأهمية بمكان التعامل مع بياناتك بشكل صحيح في الواجهة الأمامية ، مما يضمن حفظ بيانات نظيفة ومتسقة عبر قاعدة البيانات الخاصة بك.

بشكل عام ، يتكون رقم الهاتف من أربعة أجزاء:

• رمز البلد: تحدد الأرقام من 1 إلى 3 أرقام (حسب الدولة) بلد رقم الهاتف. يسمح هذا الرمز بتوجيه المكالمة إلى البلد الصحيح. لا يمكن أن يبدأ رمز البلد بالرقم 0.

المقالة التي تقوم بتحريرها حاليًا بعنوان "التحقق من صحة أرقام الهواتف في JavaScript باستخدام التعبيرات العادية". جزء النص المراد تحريره:

• رمز المنطقة: يُعرف أيضًا باسم المدينة أو رمز الاتصال ، ويساعد هذا الجزء من الرقم في توجيه المكالمة إلى المنطقة الجغرافية الصحيحة داخل البلد. في بعض البلدان ، مثل الولايات المتحدة ، يمكن أن تشير رموز المنطقة أيضًا إلى مجموعة محددة من أرقام الهواتف لخدمة معينة. بالإضافة إلى ذلك ، في أمريكا الشمالية ، لا يمكن أن يبدأ رمز المنطقة بـ 0 أو 1.
• بادئة الهاتف: يتم تعيين هذا التسلسل من الأرقام لمكتب مركزي معين أو مقسم هاتف من قبل شركة الهاتف ، مما يزيد من تضييق المنطقة الجغرافية المحددة أو الحي.
• رقم السطر: هذا هو الرقم الفريد المخصص لخط الهاتف المحدد لأسرة أو شركة داخل منطقة البادئة. يضمن هذا الجزء من الرقم عادةً أن يكون كل رقم هاتف داخل البلد والمنطقة والبادئة فريدًا.

باستثناء رمز البلد ، ينتج عن دمج الأجزاء المتبقية رقم هاتف مكون من عشرة أرقام حيث يتكون كل من رمز المنطقة وبادئة الهاتف من ثلاثة أرقام ، ورقم السطر هو أربعة أرقام.

دعنا ننتقل الآن إلى كتابة دالة JavaScript تتحقق من صحة رقم الهاتف بناءً على هذه المعايير باستخدام التعبيرات العادية.

قم بإنشاء RegEx للتحقق من صحة رقم الهاتف

لقد فهمنا بالفعل الهيكل الأساسي لرقم الهاتف. لقد تعلمنا أيضًا عن التعبيرات النمطية وكيف يمكن استخدامها في 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 أرقام ولا يبدأ بصفر.

للإشارة إلى بداية التعبير النمطي ، استخدم علامة الإقحام (^) ، ثم تحقق من وجود علامة زائد في البداية. لهذا الغرض ، دعونا نستخدم +، والتي ستطابق وجود علامة الجمع في البداية. الآن ، للتأكد من أن أرقام رمز البلد تتراوح بين رقم واحد إلى ثلاثة أرقام وأن الرقم الأول ليس صفرًا ، يمكننا كتابة شيء مثل هذا: [1-9]{1}[0-9]{0,2}. هنا، [1-9]{1} يحدد أن أي رقم من 1 إلى 9 يمكن أن يوجد مرة واحدة بالضبط ، وبالمثل ، [0-9]{0,2} يشير إلى أن أي رقم من 0 إلى 9 يمكن أن يوجد من صفر إلى مرتين.

بالنسبة للفاصل ، يمكننا إضافة أ - (واصلة) بين أقسام الرقم. واحد - يمكن إضافتها بعد التحقق من صحة رمز البلد. لذلك ، في هذه المرحلة ، يبدو التعبير المعتاد كما يلي:

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

• $ في النهاية يحدد نهاية السطر. الآن ، بالنسبة لرمز المنطقة ، سيكون هذا مشابهًا تمامًا. لا يمكن أن يبدأ رمز المنطقة بصفر أو واحد. لذا ، سيكون الجزء الأول [2-9]{1}. يطابق هذا الرقم الأول بين 2 و 9. تحدث هذه المطابقة مرة واحدة. بعد ذلك ، بالنسبة لبقية الشفرة ، يمكننا الكتابة [0-9]{2}. سيضمن هذا وجود رقمين بالضبط بعد الأول ، ولكل رقم ، يكون النطاق بين 0 و 9. مرة أخرى ، أضف فاصل الواصلة في النهاية.

الآن ، سيبدو التعبير العادي الكامل كما يلي:

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

دعنا مرة أخرى نستخدم نفس النمط للتحقق من بادئة الهاتف. لنفترض أن بادئة الهاتف أيضًا لا يمكن أن تبدأ بصفر أو واحد. لذا ، مضيفا [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--|-|

الجزء الوحيد المتبقي الآن هو رقم السطر ، والذي يمكن أن يكون أي رقم بطول أربعة بالضبط. هذا أبسط من الآخرين. التعبير [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}، سيتطابق مع النمط السابق مرة واحدة تمامًا. ومع ذلك ، إذا كان نطاقًا ، مثل {0, 2}، فهو يحدد الحد الأدنى والحد الأقصى لعدد المطابقات. لذلك ، في حالة {0, 2}، سيتطابق مع النمط بحد أدنى صفر مرة ومرتين كحد أقصى.

النمط جاهز. يمكننا الآن كتابة دالة 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 ، نتحقق مما إذا كان رقم الهاتف يجتاز الاختبار. إذا كان الأمر كذلك ، فسنرجع صحيحًا ونرسل رسالة وحدة تحكم تفيد بأن Phone number is valid. خلاف ذلك ، تقوم بإرجاع خطأ وتعرض رسالة وحدة تحكم تشير إلى أن رقم الهاتف غير صالح.

مع هذا ، نحن على ما يرام. الآن ، يمكنك اختبار أرقام الهواتف الخاصة بك لمعرفة ما إذا كانت صالحة.

نبذة عامة

تهدف هذه المقالة إلى تقديم نظرة عامة موجزة عن التعبيرات العادية ، واستخداماتها ، وكيف يمكن تطبيقها للتحقق من صحة أرقام الهواتف. ناقشنا أيضًا المكونات المختلفة لرقم الهاتف وكيف يمكن اختبار كل مكون.

من خلال الفهم الأساسي للتعبيرات النمطية ، يمكنك الآن استكشاف أنماط إضافية. يمكنك أيضًا استخدام أدوات مثل regex101 للتحقق من صحة تعبيراتك على الإنترنت.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• تمويل EVM. واجهة موحدة للتمويل اللامركزي. الوصول هنا.
• مجموعة كوانتوم ميديا. تضخيم IR / PR. الوصول هنا.
• أفلاطونايستريم. ذكاء بيانات Web3. تضخيم المعرفة. الوصول هنا.
• المصدر https://stackabuse.com/validate-phone-numbers-in-javascript-with-regular-expressions/