مقدمة في التحقق من صحة HTML5

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

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

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

لماذا نحتاج إلى التحقق من صحة الإدخال الأمامي

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

1. مفيدة

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

2. تأمين

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

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

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

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

"يعمل التحقق من صحة الإدخال بشكل أفضل مع القيم المقيدة للغاية ، على سبيل المثال عندما يكون شيء ما عددًا صحيحًا أو سلسلة أبجدية رقمية أو عنوان URL HTTP."

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

التحقق من صحة HTML5

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

لإجراء التقييم ، تستخدم الخوارزمية سمات التحقق من صحة عناصر الإدخال, مثل , </code>, و <code><select></code>. إذا كنت تريد معرفة كيف يحدث التحقق من صحة القيد خطوة بخطوة في المتصفح ، راجع مستند WhatWG هذا.</p> <p>بفضل ميزة التحقق من صحة HTML5 ، يمكننا تنفيذ الكل <strong>مهام التحقق من صحة المدخلات القياسية</strong> على جانب العميل <strong>بدون جافا سكريبت ، فقط مع HTML5</strong>.</p> <p>لأداء مهام أكثر تعقيدًا تتعلق بالتحقق من الصحة ، يوفر لنا HTML5 <strong>التحقق من صحة جافا سكريبت API</strong> يمكننا استخدام لإعداد البرامج النصية التحقق من الصحة المخصصة لدينا.</p> <h4>التحقق من صحة مع أنواع المدخلات الدلالية</h4> <p>قدم HTML5 <strong>أنواع المدخلات الدلالية</strong> هذا - بالإضافة إلى الإشارة إلى معنى العنصر الخاص بوكلاء المستخدم - يمكن استخدامه أيضًا <strong>التحقق من صحة إدخال المستخدم</strong> عن طريق قصر المستخدمين على تنسيق إدخال معين.</p> <p>إلى جانب أنواع المدخلات التي كانت موجودة بالفعل قبل HTML5 (<code>نص</code>, <code>كلمه السر</code>, <code>خضع</code>, <code>إعادة تعيين</code>, <code>راديو</code>, <code>مربع</code>, <code>زر</code>, <code>مخفي</code>) ، يمكننا أيضا استخدام ما يلي <strong>أنواع مدخلات HTML5 الدلالية</strong>: <code>البريد الإلكتروني</code>,<code>الهاتف</code>,<code>رابط</code>,<code>رقم</code>,<code>زمن</code>,<code>تاريخ</code>,<code>التاريخ والوقت</code>,<code>التاريخ والوقت المحلي</code>, <code>شهر</code>,<code>أسبوع</code>, <code>نطاق</code>, <code>بحث</code>,<code>اللون</code>.</p> <p>يمكننا أن نستخدم بأمان أنواع مدخلات HTML5 مع المتصفحات القديمة ، لأنها سوف تتصرف ك <code><input type="text"></code> الحقل في المتصفحات التي لا تدعمها.</p> <p>دعونا نرى ما يحدث عندما يدخل المستخدم نوع الإدخال غير صحيح. لنفترض أننا أنشأنا حقل إدخال بريد إلكتروني بالشفرة التالية:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">بريدك الالكتروني:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>عندما يكتب المستخدم سلسلة لا تستخدم تنسيق بريد إلكتروني ، تكون خوارزمية التحقق من صحة القيد <strong>لا يقدم النموذج</strong>, و <strong>إرجاع رسالة خطأ</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>تنطبق نفس القاعدة على أنواع المدخلات الأخرى أيضًا ، على سبيل المثال <code>اكتب = "URL"</code> يمكن للمستخدمين فقط إرسال إدخال يتبع تنسيق URL (يبدأ ببروتوكول ، مثل <code>HTTP: //</code> أو <code>بروتوكول نقل الملفات: //</code>).</p> <p>بعض أنواع المدخلات تستخدم التصميم الذي <strong>لا يسمح للمستخدمين بإدخال تنسيق إدخال خاطئ</strong>, فمثلا <code>اللون</code> و <code>نطاق</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">لون الخلفية:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>إذا استخدمنا <code>اللون</code> نوع الإدخال يكون المستخدم مقيدًا إما باختيار لون من منتقي الألوان أو البقاء باللون الأسود الافتراضي. حقل الإدخال هو <strong>مقيدة حسب التصميم</strong>, لذلك لا يترك فرصة كبيرة لخطأ المستخدم.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>عندما يكون ذلك مناسبًا ، يجدر التفكير في استخدام <code><select></code> علامة HTML التي تعمل بشكل مشابه لأنواع الإدخال المقيدة حسب التصميم ؛ يتيح للمستخدمين الاختيار من قائمة منسدلة.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">الفاكهة المفضلة لديك:</label> <select name="fruit"> <option value="apple">تفاحة</option> <option value="pear">كمثرى</option> <option value="orange">البرتقالي</option> <option value="raspberry">توت العليق</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>استخدم سمات التحقق من HTML5</h4> <p>إن استخدام أنواع المدخلات الدلالية يحدد بعض القيود على ما يسمح للمستخدمين بإرساله ، ولكن في كثير من الحالات نريد أن نذهب إلى أبعد من ذلك. هذا هو عندما يكون <strong>سمات التحقق من الصحة</strong> من <code><input></code> العلامة يمكن أن تساعدنا.</p> <p>تنتمي السمات المتعلقة بالتحقق من الصحة إلى أنواع معينة من المدخلات (لا يمكن استخدامها على <em>الكل</em> أنواع) التي تفرض عليها المزيد من القيود.</p> <h5>1. <code>مطلوب</code> للحصول على مدخلات صالحة بكل الوسائل</h5> <p>ال <code>مطلوب</code> السمة هي أكثر سمات التحقق من صحة HTML شهرة. انه <strong>السمة المنطقية</strong> مما يعني ذلك <strong>لا يأخذ أي قيمة</strong>, لدينا فقط ببساطة لوضعها داخل <code><input></code> العلامة إذا أردنا استخدامها:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>إذا نسي المستخدم إدخال قيمة في حقل الإدخال المطلوب ، في المتصفح <strong>إرجاع رسالة خطأ</strong> أن يحذرهم لملء الحقل ، وأنهم <strong>لا يمكن تقديم النموذج</strong> حتى قاموا بتوفير مدخلات صالحة. لهذا السبب من المهم أن تكون دائمًا <strong>بمناسبة بصريا</strong> الحقول المطلوبة للمستخدمين.</p> <p>ال <code>مطلوب</code> السمة يمكن أن يكون <strong>تستخدم جنبا إلى جنب مع أنواع المدخلات التالية</strong>: <code>نص</code>, <code>بحث</code>, <code>رابط</code>, <code>الهاتف</code>, <code>البريد الإلكتروني</code>, <code>كلمه السر</code>, <code>تاريخ</code>, <code>التاريخ والوقت</code>, <code>التاريخ والوقت المحلي</code>, <code>شهر</code>, <code>أسبوع</code>,<code>زمن</code>, <code>رقم</code>, <code>مربع</code>, <code>راديو</code>, <code>ملف</code>, زائد مع <code><textarea></code>و <code><select></code> علامات HTML.</p> <h5>2. <code>دقيقة</code>, <code>ماكس</code> و <code>خطوة</code> للتحقق من صحة الرقم</h5> <p>ال <code>دقيقة</code>, <code>ماكس</code> و <code>خطوة</code> سمات تمكننا من <strong>وضع قيود على حقول إدخال الرقم</strong>. يمكن استخدامها جنبا إلى جنب مع <code>نطاق</code>, <code>رقم</code>, <code>تاريخ</code>, <code>شهر</code>, <code>أسبوع</code>, <code>التاريخ والوقت</code>, <code>التاريخ والوقت المحلي</code>, و <code>زمن</code> أنواع المدخلات.</p> <p>ال <code>دقيقة</code> و <code>ماكس</code> سمات توفر وسيلة رائعة بسهولة <strong>استبعاد البيانات غير المعقولة</strong>. على سبيل المثال ، المثال التالي يفرض على المستخدمين إرسال سن يتراوح بين 18 و 120 عامًا.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">عمرك:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>عندما تصطدم خوارزمية التحقق من صحة القيد في إدخال مستخدم أصغر من <code>دقيقة</code>, أو أكبر من <code>ماكس</code> قيمة ، ويمنعها من الوصول إلى الواجهة الخلفية ، وإرجاع رسالة خطأ.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>ال <code>خطوة</code> صفة، عزا <strong>يحدد الفاصل الزمني الرقمي</strong> بين القيم القانونية لحقل إدخال رقمي. على سبيل المثال ، إذا أردنا أن يختار المستخدمون فقط من سنوات كبيسة ، فيمكننا إضافة <code>خطوة = "4"</code> السمة إلى الحقل. في المثال أدناه اعتدت على <code>رقم</code> نوع الإدخال ، كما لا يوجد <code>نوع = "السنة"</code> في HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">سنة قفزة المفضلة لديك:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>مع القيود المحددة مسبقًا ، يمكن للمستخدمين الاختيار فقط من سنوات كبيسة بين عامي 1972 و 2016 إذا كانوا يستخدمون السهم العلوي الصغير الذي يأتي مع <code>رقم</code> نوع الإدخال. يمكنهم أيضًا كتابة قيمة يدويًا في حقل الإدخال ، ولكن في حالة عدم وفائها بالقيود ، فسوف يعرض المتصفح رسالة خطأ.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>الحد الاقصى للطول</code> للتحقق من طول النص</h5> <p>ال <code>الحد الاقصى للطول</code> السمة تجعل من الممكن ل <strong>تعيين الحد الأقصى لطول الأحرف</strong> لحقول المدخلات النصية. ويمكن استخدامه جنبا إلى جنب مع <code>نص</code>, <code>بحث</code>, <code>رابط</code>, <code>الهاتف</code>, <code>البريد الإلكتروني</code> و <code>كلمه السر</code> أنواع المدخلات ، ومع <code><textarea></code> علامة HTML.</p> <p>ال <code>الحد الاقصى للطول</code> يمكن أن تكون السمة حلاً ممتازًا لحقول رقم الهاتف التي لا يمكن أن تحتوي على أكثر من عدد معين من الأحرف ، أو لنماذج جهات الاتصال حيث لا نريد أن يكتب المستخدمون أكثر من طول معين.</p> <p>يعرض مقتطف الشفرة أدناه مثالًا للأخير ، فهو يقصر رسائل المستخدم على 500 حرف. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">الرسالة (بحد أقصى 500 حرف):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

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

 
 * كلمة السر خاصتك: