يعرف كل مطور ويب الشعور: لقد أنشأت نموذجًا ، وأطلقت تأوهًا كما تدرك أنه يتعين عليك الآن التحقق من صحة كل حقل.
لحسن الحظ ، لا يجب أن يكون التحقق من صحة النموذج مؤلمًا. يمكنك استخدام التعبيرات العادية للتعامل مع العديد من احتياجات التحقق الشائعة.
ما هي التعبيرات العادية؟
تصف التعبيرات العادية الأنماط التي تطابق مجموعات الأحرف في السلاسل. يمكنك استخدامها لتمثيل مفاهيم مثل "الأرقام فقط" أو "خمسة أحرف كبيرة بالضبط".
التعبيرات العادية (وتسمى أيضًا regex) هي أدوات فعالة. لديهم العديد من الاستخدامات ، بما في ذلك عمليات البحث المتقدم ، والبحث والاستبدال ، والتحقق من صحة السلاسل. أحد التطبيقات الشهيرة للتعبيرات النمطية هو الأمر grep في Linux.
لماذا تستخدم التعبيرات العادية للتحقق؟
هنالك الكثير طرق للتحقق من صحة إدخال النموذج، لكن التعبيرات النمطية بسيطة وسريعة وملائمة للاستخدام إذا فهمت كيف.
جافا سكريبت لديها دعم أصلي للتعبيرات العادية. هذا يعني أن استخدامها للتحقق من الصحة بدلاً من المكتبة الخارجية يساعد في الحفاظ على حجم تطبيق الويب الخاص بك صغيرًا قدر الإمكان.
التعبيرات العادية قادرة أيضًا على التحقق من العديد من أنواع إدخال النموذج.
أساسيات التعبيرات العادية
تتكون التعبيرات العادية من رموز تصف الأنماط المكونة من أحرف في سلسلة. في JavaScript ، يمكنك إنشاء تعبير عادي حرفي عن طريق كتابته بين شريحتين مائلتين للأمام. يبدو أبسط شكل من أشكال التعبير النمطي كما يلي:
/abc/سيطابق التعبير العادي أعلاه أي سلسلة تتضمن الأحرف "أ" و "ب" و "ج" بهذا الترتيب ، على التوالي. ستطابق السلسلة "abc" ذلك التعبير العادي ، بالإضافة إلى سلسلة مثل "abcdef".
يمكنك وصف أنماط أكثر تقدمًا باستخدام أحرف خاصة في تعبيراتك العادية. لا تمثل الأحرف الخاصة حرفًا حرفيًا ، لكنها تجعل تعبيرك العادي أكثر تعبيراً.
يمكنك استخدامها لتحديد وجوب تكرار جزء من النمط لعدد معين من المرات ، أو للإشارة إلى أن بعضًا من النمط اختياري.
مثال على الحرف الخاص هو "*". يعدل الحرف "*" إما حرفًا واحدًا أو مجموعة من الأحرف التي تسبقه. يعلن أن هذه الأحرف قد تكون غائبة أو قد تكرر نفسها أي عدد من المرات على التوالي. فمثلا:
/abc*/
سيطابق "ab" متبوعًا بأي عدد من الأحرف "c". السلسلة "ab" هي مثال صالح لهذا النمط ، لأن الحرف "c" اختياري. السلاسل "abc" و "abccccc" صالحة بشكل متساوٍ ، لأن "*" تعني أن "c" يمكنها تكرار أي عدد من المرات.
يستخدم بناء جملة التعبير العادي الكامل عدة أحرف نمط أخرى لوصف التطابقات المحتملة. يمكنك تعلم المزيد من Regexlearn.com's Regex 101 دورة تفاعلية. دليل جافا سكريبت MDN هو أيضا مفيد جدا.
التحقق من صحة النموذج باستخدام التعبيرات العادية
يمكنك استخدام regex للتحقق من صحة إدخال النموذج بطريقتين. الطريقة الأولى هي استخدام JavaScript. يتضمن بضع خطوات:
- احصل على قيمة إدخال النموذج.
- تحقق مما إذا كانت قيمة الإدخال تطابق التعبير العادي.
- إذا لم يحدث ذلك ، اعرض لمستخدم موقع الويب أن قيمة حقل الإدخال غير صالحة.
هنا مثال قصير. إعطاء حقل إدخال مثل هذا:
<عنصر نائب الإدخال ="حقل الادخال">يمكنك كتابة دالة للتحقق من صحتها كما يلي:
وظيفةالتحقق من صحة() {
يترك القيمة = وثيقة.querySelector ("المدخلات"). value ؛
مقدار ثابت regEx = /^.{3,7}$/;
إرجاع regEx.test (القيمة) ؛
}هناك طريقة أخرى وهي الاستفادة من إمكانات التحقق من صحة نموذج HTML بالمتصفح. كيف؟ من خلال تحديد regex كقيمة سمة النمط لعلامة إدخال HTML.
سمة النمط صالحة فقط لأنواع الإدخال التالية: نص ، هاتف ، بريد إلكتروني ، عنوان url ، كلمة مرور ، وبحث.
فيما يلي مثال باستخدام سمة النمط:
<شكل>
<عنصر نائب الإدخال ="حقل الادخال" النمط المطلوب ="/^.{3,7}$/">
<زر>يُقدِّم</button>
</form>إذا قمت بإرسال النموذج وكانت قيمة الإدخال لا تتطابق مع التعبير العادي بأكمله ، فسيعرض النموذج خطأ افتراضيًا يبدو كالتالي:
إذا كان التعبير العادي المقدم لسمة النمط غير صالح ، فسيتجاهل المتصفح السمة.
أنماط Regex الشائعة للتحقق من صحة النموذج
قد يستغرق إنشاء Regex وتصحيحه من البداية بعض الوقت. فيما يلي بعض عبارات regex التي يمكنك استخدامها للتحقق من صحة بعض الأنواع الأكثر شيوعًا لبيانات النموذج.
تعبير عادي للتحقق من طول السلسلة
أحد أكثر متطلبات التحقق شيوعًا هو تقييد طول السلسلة. التعبير العادي الذي سيطابق سلسلة مكونة من سبعة أحرف هو:
/^.{7}$/ال "." هو عنصر نائب يطابق أي حرف ، ويحدد الرقم "7" بين الأقواس المتعرجة حد طول السلسلة. إذا احتاجت السلسلة إلى أن تكون ضمن نطاق معين من الطول ، مثل ما بين ثلاثة وسبعة ، فسيبدو التعبير النمطي كالتالي:
/^.{3,7}$/وإذا احتاجت السلسلة إلى أن تتكون من ثلاثة أحرف على الأقل بدون حد أعلى ، فستبدو كما يلي:
/^.{3,}$/من غير المحتمل أن يكون الطول هو المطلب الوحيد للتحقق من صحة إدخال النموذج. لكنك ستستخدمها غالبًا كجزء من تعبير عادي أكثر تعقيدًا بما في ذلك الشروط الأخرى.
التعبير العادي للتحقق من صحة الحقول التي تحتوي على أحرف فقط
يجب ألا تحتوي بعض مدخلات النموذج على أي شيء سوى الأحرف لكي تكون صالحة. سيطابق التعبير العادي التالي هذه السلاسل فقط:
/^[a-zA-Z]+$/يحدد هذا التعبير العادي مجموعة أحرف مكونة من الأبجدية بأكملها. يعني الحرف الخاص "+" أن الحرف السابق يجب أن يظهر مرة واحدة على الأقل ، بدون حد أعلى.
التعبير العادي للتحقق من صحة الحقول ذات الأرقام فقط
سيطابق التعبير العادي التالي فقط السلاسل المكونة بالكامل من أرقام:
/^\d+$/التعبير النمطي أعلاه هو في الأساس نفس التعبير السابق. الاختلاف الوحيد هو أنه يستخدم حرفًا خاصًا "\ d" لتمثيل نطاق الأرقام ، بدلاً من كتابتها.
تعبير عادي للتحقق من صحة الحقول الأبجدية الرقمية
تجعل التعبيرات العادية من السهل التحقق من صحة الحقول الأبجدية الرقمية أيضًا. إليك تعبير عادي يطابق فقط السلاسل المكونة من أحرف وأرقام:
/^[a-zA-Z\d]+$/بعض الحقول أبجدية رقمية ، لكنها تسمح ببعض الأحرف الأخرى مثل الواصلات والشرطات السفلية. أحد الأمثلة على هذه الحقول هو اسم المستخدم. يوجد أدناه تعبير عادي يطابق سلسلة مكونة من أحرف وأرقام وشرطات سفلية وواصلات:
/^(\w|-)+$/يتطابق الحرف الخاص "\ w" مع فئة كاملة من الأحرف ، مثل "\ d". وهو يمثل نطاق الأبجدية والأرقام وحرف الشرطة السفلية ("_").
التعبير العادي للتحقق من صحة أرقام الهواتف
يمكن أن يكون رقم الهاتف حقلاً معقدًا للتحقق من صحته لأن البلدان المختلفة تستخدم تنسيقات مختلفة. تتمثل الطريقة العامة جدًا في التأكد من أن السلسلة تحتوي على أرقام فقط وأن طولها يقع ضمن نطاق معين:
/^\d{9,15}$/قد يبدو النهج الأكثر تعقيدًا مثل هذا النهج المأخوذ من MDN، والتي تتحقق من صحة أرقام الهواتف بالتنسيق ### - ### - ####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/التعبير العادي للتحقق من التواريخ
مثل أرقام الهواتف ، يمكن أن تحتوي التواريخ أيضًا على تنسيقات متعددة. عادة ما تكون التواريخ أقل تعقيدًا للتحقق من صحة أرقام الهواتف. لماذا ا؟ لا تحتوي التواريخ على أحرف بخلاف الأرقام والواصلات.
فيما يلي مثال للتحقق من صحة التواريخ بتنسيق "DD-MM-YYYY".
/^\d{2}-\d{2}-\d{4}$/من السهل التحقق من صحة مع Regex
تصف التعبيرات العادية الأنماط التي تطابق مجموعات الأحرف في السلاسل. لديهم مجموعة متنوعة من التطبيقات ، مثل التحقق من صحة إدخال المستخدم من نماذج HTML.
يمكنك استخدام regex للتحقق من صحة باستخدام JavaScript أو عبر سمة نمط HTML. من السهل إنشاء تعبيرات عادية للتحقق من الأنواع الشائعة لإدخالات النموذج مثل التواريخ وأسماء المستخدمين.
