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

اكتب شفرة JavaScript للتحقق مما إذا كانت القيمة المرسلة لحقل رقم الهاتف بتنسيق شائع.

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

1. أهمية التحقق من صحة بيانات المستخدم

التحقق من صحة البيانات هو عملية أساسية لضمان أن المعلومات التي يقدمها المستخدمون صحيحة ومتوافقة مع المتطلبات. بالنسبة لأرقام الهواتف، يختلف التنسيق باختلاف الدول، لكن هناك بعض الأنماط الشائعة التي يمكن استخدامها للتحقق من صحة الرقم المدخل.

لماذا نحتاج للتحقق من صحة رقم الهاتف؟

• تجنب الأخطاء البشرية عند إدخال البيانات.
• التأكد من أن رقم الهاتف صالح للاستخدام والتواصل.
• حماية بيانات المستخدمين وتحسين تجربة المستخدم.

2. التنسيقات الشائعة لأرقام الهواتف

تختلف تنسيقات أرقام الهواتف من بلد إلى آخر، ولكن يمكن أن نستخدم أنماطًا شائعة تشمل:

• أرقام تتكون من 10 أرقام.
• أرقام تتضمن مسافات أو شرطات لفصل أجزاء الرقم.
• أرقام تحتوي على رمز الدولة (مثل +1 أو +44).

3. كتابة شفرة JavaScript للتحقق من تنسيق رقم الهاتف

يمكن استخدام التعبيرات العادية (Regular Expressions) للتحقق من تنسيق رقم الهاتف بسهولة. فيما يلي مثال على شفرة JavaScript التي تتحقق مما إذا كان رقم الهاتف المدخل يتبع تنسيقًا شائعًا.

شفرة JavaScript للتحقق من رقم الهاتف:

function isValidPhoneNumber(phoneNumber) {
// تعبير عادي للتحقق من تنسيق رقم الهاتف
const phonePattern = /^\+?(\d{1,3})?[-. ]?\(?\d{3}\)?[-. ]?\d{3}[-. ]?\d{4}$/;

// التحقق من مطابقة الرقم المدخل للتعبير العادي
return phonePattern.test(phoneNumber);
}

// اختبار الدالة مع أرقام هواتف مختلفة
const phone1 = “+1 (123) 456-7890”;
const phone2 = “123-456-7890”;
const phone3 = “1234567890”;
const phone4 = “+44 123 456 7890”;
const phone5 = “987654”;

console.log(isValidPhoneNumber(phone1)); // true
console.log(isValidPhoneNumber(phone2)); // true
console.log(isValidPhoneNumber(phone3)); // true
console.log(isValidPhoneNumber(phone4)); // true
console.log(isValidPhoneNumber(phone5)); // false

شرح الشفرة

1. التعبير العادي:
   • ^\+?(\d{1,3})?: يتحقق من وجود رمز الدولة (اختياري)، مثل “+1”.
   • [-. ]?: يتحقق من وجود مسافات أو شرطات أو نقاط بين أجزاء الرقم (اختياري).
   • \(?\d{3}\)?: يتحقق من وجود 3 أرقام، مع إمكانية وجود أقواس حول هذه الأرقام (اختياري).
   • [-. ]?\d{3}: يتحقق من وجود 3 أرقام إضافية، مع مسافة أو شرطة أو نقطة بينها.
   • [-. ]?\d{4}$: يتحقق من وجود 4 أرقام في النهاية.
2. الدالة isValidPhoneNumber: تستخدم هذه الدالة التعبير العادي للتحقق مما إذا كان رقم الهاتف المدخل يتبع النمط المطلوب أم لا. إذا تطابق الرقم مع النمط، فإن الدالة ترجع true، وإلا فإنها ترجع false.
3. اختبار الدالة: يتم اختبار الدالة مع عدة أرقام هواتف مختلفة، بعضها صحيح وبعضها غير صحيح.

4. تحسين الشفرة لتتناسب مع تنسيقات متعددة

يمكنك تخصيص التعبير العادي ليتناسب مع تنسيقات أرقام الهواتف في دول معينة أو لإضافة المزيد من القيود، مثل إجبار وجود رمز الدولة أو التأكد من وجود عدد معين من الأرقام.

مثال على تحسين الشفرة:

إذا أردنا التأكد من أن الرقم يحتوي دائمًا على رمز الدولة، يمكن تعديل التعبير العادي على النحو التالي:

const phonePatternWithCountryCode = /^\+(\d{1,3})[-. ]?\(?\d{3}\)?[-. ]?\d{3}[-. ]?\d{4}$/;

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