يحتوي HTML5 على تحسين كبير للأشكال ، سواء كانت دلالات أو مكونات صغيرة أو التحقق من تنسيق البيانات. أظن أنك ستستخدم بالتأكيد توافق المتصفح كذريعة لاستخدام هذه الميزات الجديدة ، ولكن هذا يجب ألا يكون السبب في راكبه. إجراء. عندما تحاول حقًا استخدام الميزات الجديدة لهذه النماذج ، أعدك أن تقع في حبها. إذا كان العيب الوحيد هو ، فإن نمط مربع المطالبة يكون افتراضيًا من قبل المتصفح ، لا يمكنك تغييره ، حسنًا ، إذا كنت تعتقد أن المستوى الجمالي لمصمم الشركة المصنعة الأشخاص العاديون أكثر من معظم الأشخاص العاديين ، جيد ، إذا كنت لا تفكر في توافق الأسلوب) ، فقط أسرعوا والمدرسة!
التحقق الأصلي نوع الإدخاليوفر HTML5 الكثير من الدعم الأصلي للتحقق من تنسيق البيانات ، مثل ::
<نوع الإدخال = 'البريد الإلكتروني'/>
عند النقر فوق زر التقديم ، إذا كان التنسيق الذي تدخله لا يفي بالبريد الإلكتروني ، فسيؤدي ذلك إلى عدم قدرته على إرساله ، وسيطالبك المتصفح بإنشاء رسالة خطأ.
على سبيل المثال ، تحت الكروم:
يلاحظ:1. فقط عند إرساله ، سوف تؤدي إلى التحقق من المتصفح
2. معلومات موجهة المتصفح المختلفة مختلفة
3. عندما لا تفي المدخلات المتعددة بالمتطلبات ، سيتم مطالبة خطأ واحد فقط.
لا تعتقد أنه عندما يكون نوع الإدخال مساوياً لـ TEL ، إذا قمت بإدخال تنسيق رقم الهاتف ، فسيتم حظرك بواسطة المتصفح ويطالب برسالة الخطأ عند إرسالها. لوحة المفاتيح الرقمية ، ولا تلعب دورًا في التحقق من البيانات.
نمطيمكنك استخدام سمة النمط لتعيين التحقق من التنسيق المخصص للمتصفح دون توفير تنسيق بيانات التحقق الأصلي. قيمة سمة النمط هي تعبير منتظم (سلسلة):
<type type = 'tel' pattern = '[0-9] {11}' if (this.value.length> 3) {// inction incture input.setCustomValidity ('' format ') ؛} els {{ input.setCustomValidity ('')}}) ؛كل إدخال لوحة مفاتيح ، سيحدد الكود ما إذا كان التنسيق صحيحًا ، ثم اتصل بـ setCustomValition لتعيين قيمة valuemessage. لا تظن أن كل متصفح مفتاح سيطرح ما إذا كانت النتيجة صحيحة.
إذا لم تكن قد فكرت في ذلك ، فستسأل بالتأكيد ، منذ ذلك الحين ، لماذا يجب عليك ربط أحداث لوحة المفاتيح للإدخال ، وتحتاج إلى الحكم على كل مدخلات؟ تقديم الحادث مباشرة للنموذج.
مع تنسيق الحكم المدخلات والأناقةكمستخدم ، بالطبع ، بعد أن علمت أنني أدخلت التنسيق الخاطئ ، يصبح مربع النص أحمر (أو هناك نصائح أخرى). وفي كل مرة أدخل فيها حرفًا ، إذا كان ذلك صحيحًا ، فسيعود مربع النص إلى طبيعته. يمكننا استخدام فئة CSS الزائفة لتنفيذ هذه الوظيفة:
الإدخال: مطلوب {background-color: #ffe14d ؛} /* يتم الحكم على هذه الفئة الزائفة من خلال خاصية ValueMessage* / الإدخال: غير صالح {الحدود: 2px solid Red ؛}.توفر الفئة الزائفة المطلوبة المذكورة أعلاه لون خلفية صفراء للمدخلات المطلوبة ولكن الفارغة ، في حين أن فئة الزائفة غير الصالحة أدناه ستضيف جانبًا أحمر 2 بكسل إلى جميع المدخلات غير المطلقة. يمكننا إضافة فئة الإدخال إلى مربع الإدخال لدينا الآن.
إن الحكم على هذه الفئرات الزائفة تحكم ما إذا كان يمكنك تقديم شكل النموذج. -أسلوب النمط.
تجربة مستخدم أفضلعيب آخر هو أنه عندما يتم ضبط المدخلات ، عند التهيئة ، لأنه فارغ ، ستعمل الفئة الزائفة غير الصالحة.
يمكننا إضافة جهاز اختيار الوالدين. invalid قبل هذه الفئرات الزائفة. يمكنك تعيين حدث إرسال.
form.addeventListener ('invalid' ، function () {this.classname = 'invalid'} ، true) لأن Invaild هو حادثة ، وليس حدث ، لذلك قمنا بتعيين المعلمة الثالثة لاستخدامها لاستخدام الأساليب. بهذه الطريقة ، تم ذلك.
المثال النهائيحسنًا ، لقد حان الوقت لتلخيص المعرفة التي تعلمناها وخلق أفضل الممارسات:
<! {border: 2px solid Red ؛} </style> </head> <body> <form id = form> <blabel> البريد الإلكتروني: <إدخال type = البريد الإلكتروني المعرف = eLaM> </billy> <billy> idcard: < المعرف المطلوب الإدخال = idcard> </billy> <إدخال نوع = إرسال = إرسال> </form> <script> var email = document.getElementById ('email') ؛ ) ؛ } آخر {this.setCustomValidity ('')}}) ؛لقطة الشاشة بعد الجري كما يلي:
ما سبق هو كل محتويات هذا المقال.