117- دروس جافا سكربت – Web Validation API

## مقدمة إلى Web Validation API في JavaScript

في الأيام الحديثة، أصبح التحقق من صحة البيانات المدخلة بواسطة المستخدم أمرًا بالغ الأهمية لضمان التفاعل السلس والآمن مع تطبيقات الويب. يلعب Web Validation API في JavaScript دورًا محوريًا في هذه العملية، حيث يوفر الأدوات الأساسية للتحقق من صحة المدخلات بكفاءة وفعالية.

## ما هو Web Validation API؟

Web Validation API هو مجموعة من الأدوات والوسائل في JavaScript التي تتيح للمطورين التحقق من صحة البيانات المدخلة في نماذج الويب قبل إرسالها إلى الخادم. يهدف هذا إلى ضمان أن البيانات المدخلة تتبع القواعد المحددة، مما يقلل من الأخطاء ويحسن من تجربة المستخدم.

## الخصائص الأساسية لـ Web Validation API

– **التكامل السلس مع HTML5**: يتكامل Web Validation API بشكل ممتاز مع عناصر HTML5، مما يجعل عملية التحقق من الصحة أكثر سهولة وفعالية.
– **التخصيص**: يمكن للمطورين تخصيص رسائل الخطأ وقواعد التحقق لتتناسب مع احتياجات التطبيق.
– **الأداء**: يعمل التحقق من الصحة على جانب العميل، مما يقلل من الضغط على الخادم ويحسن من أداء التطبيق.

## كيفية استخدام Web Validation API

### 1. التحقق من صحة الحقول النصية

يمكننا استخدام خاصية `setCustomValidity` لتحديد رسالة خطأ مخصصة لعنصر معين. في المثال التالي، نتحقق مما إذا كان الحقل النصي فارغًا أو لا.

“`html

const form = document.getElementById(‘myForm’);
const usernameInput = document.getElementById(‘username’);

form.addEventListener(‘submit’, function(event) {
if (usernameInput.value.trim() === ”) {
usernameInput.setCustomValidity(‘Username cannot be empty’);
} else {
usernameInput.setCustomValidity(”);
}
});

“`

### 2. التحقق من صحة البريد الإلكتروني

يوفر HTML5 نوع الإدخال `email`، والذي يمكن استخدامه للتحقق من صحة عنوان البريد الإلكتروني. ومع [شركة برمجة مصرية] ذلك، يمكننا إضافة طبقة إضافية من التحقق باستخدام JavaScript.

“`html

const emailForm = document.getElementById(’emailForm’);
const emailInput = document.getElementById(’email’);

emailForm.addEventListener(‘submit’, function(event) {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(emailInput.value)) {
emailInput.setCustomValidity(‘Please enter a valid email address’);
} else {
emailInput.setCustomValidity(”);
}
});

“`

### 3. التحقق من تطابق كلمات المرور

للتحقق من أن كلمتي المرور متطابقتان، يمكننا استخدام JavaScript للتحقق من القيم قبل إرسال النموذج.

“`html

const passwordForm = document.getElementById(‘passwordForm’);
const passwordInput = document.getElementById(‘password’);
const confirmPasswordInput = document.getElementById(‘confirmPassword’);

passwordForm.addEventListener(‘submit’, function(event) {
if (passwordInput.value !== confirmPasswordInput.value) {
confirmPasswordInput.setCustomValidity(‘Passwords do not match’);
} else {
confirmPasswordInput.setCustomValidity(”);
}
});

“`

## الخاتمة

يوفر Web Validation API في JavaScript أداة قوية للتحقق من صحة البيانات المدخلة بواسطة المستخدمين على الويب. باستخدامه بشكل صحيح، يمكن للمطورين تحسين تجربة المستخدم وضمان أن البيانات المقدمة تتبع القواعد المحددة، مما يقلل من الأخطاء ويعزز الأمان. من خلال دمج هذه الأدوات [شركة برمجة مصرية] في تطبيقات الويب الخاصة بك، يمكنك تحقيق تفاعل سلس وموثوق مع المستخدمين.