التحقق من صحة النموذج

تشرح هذه المقالة التحقق من صحة النموذج۔

إنه يشرح التحقق من صحة النموذج في HTML۔

YouTube Video

التحقق من صحة نموذج HTML

نظرة عامة على التحقق من صحة نموذج HTML

• التحقق من صحة نموذج HTML هو آلية لضمان أن البيانات تفي بشروط معينة قبل أن يقوم المستخدم بتقديمها۔ هذا يقلل من أخطاء الخادم ويحسن تجربة المستخدم۔

السمة required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• السمة required تحدد أن الحقول يجب أن تُملأ قبل تقديم النموذج۔

السمة pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• السمة pattern تُستخدم للتحقق مما إذا كانت مدخلات النموذج تطابق نمط تعبير منتظم معين۔ على سبيل المثال، هذا يتحقق مما إذا كان اسم المستخدم يحتوي فقط على أحرف أبجدية ورقمية۔

السمتان min و max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• تُستخدم السمتان <min> و <max> لتحديد الحد الأدنى والأقصى للقيم المسموح بها لعنصر إدخال۔ تُستخدم عادةً مع أنواع الإدخال مثل number و range و date۔
• في هذا المثال، يمكنك إدخال رقم بين 18 و 99۔

السمتان minlength و maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• السمة minlength تحدد الحد الأدنى لعدد الأحرف المطلوبة للحقل المدخل، بينما السمة maxlength تحدد الحد الأقصى لعدد الأحرف المسموح بها۔
• في هذا المثال، يمكنك إدخال نص يتراوح بين 4 و12 حرفاً۔

سمة type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• تُستخدم سمة type="email" للتأكد من أن الإدخال بصيغة عنوان بريد إلكتروني صالح۔ توفر هذه السمة وظيفة تحقق مدمجة لحقل إدخال عناوين البريد الإلكتروني۔

سمة type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> يوفر حقلاً يتطلب إدخال بصيغة عنوان URL صحيح۔ يتحقق المتصفح تلقائيًا مما إذا كان الإدخال صالحاً كعنوان URL۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video