خلاصة من الطبقات الزائفة

الفئة الزائفة هي معلومات حول عنصر موجود في شجرة المستندات ولكنه غير متوفر من خلال أية سمات محددة. على سبيل المثال ، ينطبق على فئة pseudo من فئة :-first-التابع العناصر التي هي الطفل الأول من والديهم. يمكنك الحصول على تلك المعلومات من شجرة DOM، ولكن لا تو جد سمة ال طفل الأول.

في CSS2.1، كانت هناك حفنة من الفئات الزائفة المتاحة، لا سيما حالات الارتباط (:lin k، :v is ited) وت لك الخاصة بإجراءات المستخدم (: نشط ، :hover ). في CSS3، أن حفنة يصبح سلة، مع الفئات الزائفة من هيكل (: نث- تابع ، :nth-من نوع)، عنصر واجهة المستخ دم (:تم ك ين، :فح ص)، وتلك التي سوف ننظر الآن، من التحقق من شكل.

التحقق من صحة النموذج بدون جافا سكريبت

حتى كما ذكرت في البداية ، HTML5 يقدم العميل من جانب التحقق من صحة النموذج دون الحاجة إلى جافا سكريبت. عند محاولة إرسال نموذج، سيقوم المستعرض الخاص بك بالتحقق من صحة كافة الحقول وإرجاع خطأ إذا كان أي من الحقول غير صحيح. سيحدث هذا في الغالب automagically — شريطة أن المتصفح الخاص بك لديه القدرة — وسوف تبدو شيئا مثل ما هو مبين في الشكل 1 :

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

سوف تغطي دعم المتصفح الحالي ونحن نذهب من خلال هذه المادة، ولكن باختصار:

• فايرفوكس و IE10 دعم بعض منه.
• الأوبرا والكروم دعم كل ذلك.
• يدعم Safari كل ذلك أيضًا، ولكن يتم تعطيل التحقق من صحة النموذج بشكل افتراضي.

هذا هو الحال، فما استقاموا لكم ثم أوصي باستخدام كروم، أوبرا، أو سفاري لعرض الأمثلة التي سوف تظهر لك.

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

حتى مع كل من غوف الفنية مملة للخروج من الطريق، دعونا الحصول على مع guff الفنية مثيرة للاهتمام ونلقي نظرة على بعض الأمثلة على التحقق من شكل.

العناصر المطلوبة والاختيارية

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

<input type="text" required>

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

الإدخال: مطلوب + label::بعد { المحتوى: "*"; }

تعتمد القواعد التي تستخدمها بالضبط على كيفية وضع علامة على المستند. تستند القاعدة في هذا المثال على العلامات التي لها هذه البنية:

<input type="text" required id="foo">
<label for="foo">فو</label>

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

الإدخال: اختياري { حد اللون: الفضة؛ }

يمكنك أن ترى هذا في العمل في الشكل 2 ، أو إلقاء نظرة على مثال حي.

عناصر صالحة وغير صالحة

هناك أنواع أخرى من التحقق من الصحة إلى جانب مجرد "مطلوب" أو "اختياري". يمكنك استخدام مطابقة النقش، مثل التحقق من صحة عنوان البريد الإلكتروني:

<input type="email">

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

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

إدخال: غير صالح + label::بعد { المحتوى: '⨉'؛ } الإدخال: صالح + label::بعد { المحتوى: '✓';

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

document.for[0]ms.addEventListener('إرسال'، دالة(ه) {e.currentTarget.classList.add('مقدم')؛   دالة التحقق من صحة النموذج الاحتياطي })؛

سوف تختلف بالضبط البرنامج النصي الذي تستخدمه، ولكن كيفما فعلت ذلك، يمكنك استخدام هذه الفئة لنمط عناصر النموذج، مثل ذلك:

إدخال .المقدم: غير صالح + label::بعد { المحتوى: '⨉'؛ }

ويبين الشكل 3 الناتج من هذا ، ويمكنك أيضا أن نرى على سبيل المثال الحية.

أمران إضافيان يجب ملاحظتهم حول هذا المثال: أولاً، من أجل استخدام JavaScript الخاص بي، لقد منعت النموذج من التحقق تلقائيًا باستخدام السمة novalidate على زر ا لإرسال؛ أو لاً، من أجل استخدام JavaScript الخاص بي. والثانية ، فايرفوكس يضع توهج الملونة حول العناصر اعتمادا على حالة التحقق من الصحة ، والتي كنت قد تجاوز في حكم باستخدام الملكية : – moz – واجهة المستخدم - غير صالحة. عرض مصدر العرض التوضيحي لمعرفة كيفية استخدام هذه.

نطاقات الأرقام

بعض أنواع الإدخال الجديدة، مثل الرقم، تسمح بنطاق من القيم باستخدام سمات الحد ال أدن ى وال حد الأقصى، على هذا النحو:

<input type="number" max="10" min="1">

على الرغم من أن عناصر تحكم النموذج عادةً ما تمنع المستخدم من إدخال قيمة خارج هذا النطاق، قد تكون هناك مناسبات (مثل عندما يتم استخدام جافا سكريبت لتوفير القيم) حيث تتجاوز القيمة المقدمة للمدخل النطاق:

<input type="number" max="10" min="1" value="11">

عندما يحدث هذا، يمكنك استخدام : خارج نطاق p seudo-class لتصفيف الخاص بك:

الإدخ[type='number']ال:خارج النطاق { لون الحدود: أحمر؛ }

وكما تتوقع، هناك نظير معروف باسم:داخل النطاق :

الإدخ[type='number']ال: في النطاق { لون الحدود: أخضر؛ }

في الشكل 4 يمكنك أن ترى هذه الطبقات الزائفة اثنين في العمل، ومرة أخرى هناك أيضا مثال على الهواء مباشرة للعرض.

القراءة والكتابة

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

<textarea readonly="">لوريم إيبسوم</textarea>

يمكنك نمط العناصر التي لديها سمة reado nly تطبي قها ، وذلك باستخدام… هل يمكنك التخمين؟ كنت على حق ، وتخيل القارئ : قراء ة فقط ال زائفة الطبقة. يمكنك دمجه مع خاصية CS S تحديد ا لمستخدم لمنع المستخدم من أن تكون قادرة على تحديد النص (في المثال، لقد قمت أيضا بتغيير نمط الحدود لجعله أكثر وضوحا):

منطقة النص:للقراءة فقط {تحديد المستخدم: بلا; }

وإذا كنت في حاجة إليها ، وهناك بالطبع : قراءة وال كتابة pseudo-class للعناصر التي ليس لديها سمة تطبيقها :

منطقة النص:القراءة والكتابة { تحديد المستخدم: نص;

يمكنك أن ترى النتائج في الشكل 5 ، وكما كان الحال من قبل هناك مثال حي أيضا.

فايرفوكس و IE10 قد نفذت فعلا سمة read only ، ولكن لم يكن لديك حتى الآن الدعم لهذه الفئات الزائفة.