جافا سكريبت هي واحدة من لغات البرمجة الأكثر شعبية المستخدمة لإنشاء صفحات الويب التفاعلية. تتمثل إحدى ميزاته الرئيسية في معالجة البيانات التي يدخلها المستخدم في النماذج. في هذا الدليل البسيط ، سنخبرك بكيفية الحصول على البيانات واستخدامها من نموذج جافا سكريبت.
أولا ، تحتاج إلى إنشاء نموذج هتمل الذي سيجمع البيانات من المستخدم. يتكون النموذج من عناصر إدخال مختلفة مثل مربعات النص وخانات الاختيار وأزرار الاختيار. يجب وضع كل عنصر داخل العلامة ويكون له معرف فريد (معرف).
عندما يقوم المستخدم بملء النموذج والنقر فوق الزر" إرسال " ، من الضروري معالجة هذه البيانات من جانب العميل. يمكنك استخدام جافا سكريبت للقيام بذلك. تحتاج إلى تعيين معالج حدث أونسوبميت للنموذج ، الذي سيتم استدعاؤه كلما تم إرسال النموذج. في هذا المعالج ، يمكنك اعتراض البيانات التي أدخلها المستخدم وإجراء العمليات اللازمة معهم.
ملاحظة: قد تكون معالجة جافا سكريبت لبيانات النموذج مطلوبة أيضا من جانب الخادم ، اعتمادا على احتياجاتك. في هذا الدليل ، سنركز فقط على معالجة البيانات من جانب العميل.
- العمل مع النماذج في جافا سكريبت
- دليل بسيط للحصول على البيانات من نموذج في جافا سكريبت
- 1. استخدام خاصية القيمة
- 2. باستخدام طريقة جيتليمنتبيد
- 3. باستخدام طريقة كيريسيليكتور
- 4. استخدام حدث الإرسال
- إعداد نموذج هتمل
- معالج لحدث تقديم النموذج
- الحصول على البيانات من نموذج
- التحقق من صحة بيانات النموذج
- إرسال البيانات من النموذج إلى الخادم
- سؤال وجواب
- ما هي طرق كائن المستند في جافا سكريبت?
العمل مع النماذج في جافا سكريبت
للعمل مع النماذج في جافا سكريبت ، هناك العديد من الطرق والخصائص المناسبة التي تسمح لك بالحصول على البيانات والتحقق من صحتها وإجراء عمليات إضافية.
وثيقة.النماذج هي خاصية تسمح لك بالوصول إلى جميع النماذج على الصفحة:
أشكال فار = وثيقة.النماذج;وحدة التحكم.سجل (نماذج) ؛ / / [هتملكولكتيون]
شكل.العناصر هي خاصية تسمح لك بالعمل مع عناصر النموذج حسب اسمها أو فهرسها:
شكل فار = وثيقة.نماذج [0];عناصر فار = شكل.الأركان;
وحدة التحكم.سجل (عناصر) ؛ / / [هتملكولكتيون]
عنصر.القيمة هي خاصية تسمح لك بالحصول على قيمة عنصر النموذج أو تعيينها:
فار المدخلات = وثيقة.جيتليمنتبيد ('بلدي المدخلات');وحدة التحكم.سجل (الإدخال.القيمة) ؛ / / القيمة
من عنصر نموذج الإدخال.القيمة = 'قيمة جديدة'; // تحديد قيمة عنصر النموذج
عنصر.التحقق هو خاصية تسمح لك بتحديد حالة مربع الاختيار أو تعيينها:
مربع فار = وثيقة.جيتليمنتبيد ('بلدي-خانة الاختيار');وحدة التحكم.سجل (مربع الاختيار.فحص) ؛ / / حالة مربع الاختيار
خانة الاختيار.تحديد = صحيح ؛ / / تعيين حالة مربع الاختيار
شكل.إرسال () هي طريقة تسمح لك بإرسال نموذج:
شكل فار = وثيقة.جيتليمنتبيد ('بلدي شكل');شكل.إرسال();
يمكنك أيضا إضافة معالج أحداث لإرسال النموذج:
شكل فار = وثيقة.جيتليمنتبيد ('بلدي شكل');شكل.أدفنتليستينر ('إرسال' ، وظيفة (الحدث) {
حدث.منع () ؛ / / إلغاء تقديم النموذج
// مزيد من الإجراءات عند تقديم النموذج
});
وبالإضافة إلى ذلك ، جافا سكريبت يسمح لك لإضافة وإزالة عناصر النموذج بشكل حيوي:
شكل فار = وثيقة.جيتليمنتبيد ('بلدي شكل');فار نيوينبوت = وثيقة.كريتيليمنت ('المدخلات');
نيوينبوت.اكتب = 'نص';
newInput.name = 'إدخال جديد';
شكل.ملحق الطفل (إدخال جديد) ؛ / / إضافة عنصر نموذج
فار أولدينبوت = وثيقة.جيتليمنتبيد ('الإدخال القديم');
شكل.إزالة الطفل (أولدينبوت) ؛ / / حذف عنصر نموذج
عند العمل مع النماذج في جافا سكريبت ، هناك العديد من الطرق والخصائص المختلفة التي يمكن استخدامها للعمل مع عناصر النموذج وبياناتها. تعلم وممارسة لهم ، وسوف تكون قادرة على خلق أشكال قوية وسهلة الاستخدام باستخدام جافا سكريبت.
دليل بسيط للحصول على البيانات من نموذج في جافا سكريبت
عندما يرسل المستخدم نموذجا على صفحة ويب ، من المهم أن تكون قادرا على تلقي البيانات ومعالجتها من هذا النموذج. في هذا الدليل ، سنلقي نظرة على بعض الطرق البسيطة للحصول على البيانات من نموذج باستخدام جافا سكريبت.
1. استخدام العقار
.
احصل على القيمة
2. باستخدام الطريقة
.
احصل على القيمة
3. باستخدام الطريقة
.
احصل على القيمة
4. باستخدام
.
إرسال
في هذا الدليل ، نظرنا في بعض الطرق البسيطة للحصول على البيانات من نموذج في جافا سكريبت. اعتمادا على احتياجاتك ، يمكنك اختيار الخيار الأكثر ملاءمة وملاءمة لمشروعك.
إعداد نموذج هتمل
للحصول على بيانات من نموذج جافا سكريبت ، تحتاج إلى إنشاء بنية هتمل المناسبة. ستغطي هذه المقالة العناصر الرئيسية التي غالبا ما تستخدم في النماذج.
يتم استخدام علامة لإنشاء النموذج. تحدد هذه العلامة بداية ونهاية النموذج وتلف جميع العناصر الموجودة بداخله. مثال:
قد تحتوي العلامة على عناصر إدخال مختلفة ، على سبيل المثال:
- - العنصر الرئيسي لإدخال البيانات ، مثل النص وكلمة المرور وخانات الاختيار وما إلى ذلك.;
- و-عناصر القائمة المنسدلة;
- - عنصر لإدخال نص متعدد الأسطر;
- - عنصر لإنشاء أزرار;
- - عنصر لربط النص بتكوين عناصر مثل مربعات الاختيار وأزرار الاختيار وما إلى ذلك.
مثال على استخدام هذه العناصر:
الاسم:
البريد الإلكتروني:
الرسالة:
إرسال
أعلاه مثال على نموذج بسيط يحتوي على ثلاثة حقول: "الاسم" و "البريد الإلكتروني" و "الرسالة". يسبق كل حقل عنصر يربط النص بعنصر الإدخال المقابل باستخدام سمات فور والمعرف. العنصر الأخير من النموذج هو زر لإرسال البيانات مع نوع الإرسال.
هذا هو القالب الأساسي لإنشاء نموذج. في المستقبل ، سوف نستخدم جافا سكريبت للعمل مع البيانات التي يدخلها المستخدم في هذا النموذج.
معالج لحدث تقديم النموذج
عند إرسال نموذج مع حدث إرسال مخصص ، يصبح من الضروري معالجة البيانات التي أدخلها المستخدم. للقيام بذلك ، يتم استخدام معالج حدث خاص ، والذي يتم تشغيله عند إرسال النموذج.
لتعيين معالج لإرسال نموذج ، يتم استخدام طريقة أديفنتليستينر () ويتم تحديد حدث الإرسال. المعالج هو وظيفة سيتم استدعاؤها عند إرسال النموذج.
مثال:
نموذج كونست = وثيقة.كيريسيليكتور ('شكل');
شكل.أدفنتليستينر ('إرسال' ، وظيفة (الحدث) {
حدث.منعالافتراضي () ؛ / / Отменить отправку формы
// Получение данных из формы
اسم كونست = وثيقة.كيريسيليكتور ('#اسم').القيمة;
كونست البريد الإلكتروني = وثيقة.اختيار الاستعلام('#البريد الإلكتروني').القيمة;
// Обработка данных
وحدة التحكم.سجل ( ':: '، الاسم);
وحدة التحكم.سجل ('البريد الإلكتروني:' ، البريد الإلكتروني);
});
في هذا المثال ، نضيف معالج إلى النموذج باستخدام طريقة كيريسلكتور () ، ثم استخدم طريقة أديفنتليستينر () لتعيين معالج لحدث إرسال النموذج.
داخل المعالج ، نسمي أولا طريقة بريفنتدفولت () لإلغاء تقديم النموذج القياسي (بحيث لا يتم إعادة تحميل الصفحة).
ثم نحصل على قيم حقول النموذج باستخدام طريقة كيريسيليكتور () وخاصية القيمة. في هذه الحالة ، نحصل على قيم الحقول باسم المعرفات والبريد الإلكتروني.
بعد ذلك ، يمكنك إضافة التعليمات البرمجية الخاصة بك لمعالجة البيانات من النموذج. في هذا المثال ، نقوم ببساطة بإخراج البيانات المستلمة إلى وحدة التحكم باستخدام وحدة التحكم.طريقة السجل ().
وبالتالي ، يسمح لك معالج حدث تقديم النموذج بتلقي البيانات من النموذج وتنفيذ الإجراءات اللازمة معه.
الحصول على البيانات من نموذج
للحصول على بيانات من نموذج في جافا سكريبت ، يمكننا استخدام طرق وخصائص مختلفة. أسهل طريقة هي استخدام خاصية القيمة ، والتي تحتوي على قيمة عنصر النموذج.
دعونا ننظر إلى مثال:
| نوع عنصر النموذج | مثال | كيفية الحصول على القيمة |
|---|---|---|
| الوثيقة.جيتليمنتبيد ('اسم') حقل النص.القيمة | ||
| الوثيقة.خانة الاختيار('تحقق').فحص | ||
| زر الاختيار | ذكر النساء | وثيقة الصورة.كيريسيليكتور ('الإدخال [الاسم= "الجنس"]: فحص').القيمة |
| القائمة المنسدلة | أبل الموز أورانج | وثيقة.جيتليمينتبيد ('الفاكهة').القيمة |
يحتوي كل عنصر نموذج على معرف فريد تم تعيينه بواسطة سمة المعرف. نستخدم هذا المعرف للحصول على العنصر باستخدام طريقة جيتليمنتبيد أو طريقة كيريسلكتور. ثم نستخدم خاصية القيمة للحصول على قيمة العنصر.
يرجى ملاحظة أنه عند الحصول على قيم أزرار الاختيار وحقول مربعات الاختيار ، استخدمنا الخصائص المحددة ، وليس القيمة. يحتوي حقل زر الاختيار على اسم شائع بسبب سمة الاسم ، ونستخدم الإدخال [الاسم= "الجنس"]: محدد محدد لتحديد زر الاختيار المحدد.
إذا كان هناك عدة عناصر بنفس الاسم على الصفحة ، يمكننا الحصول على قيمها باستخدام طريقة كيريسلكتورال. على سبيل المثال:
خانات فار = وثيقة.كيريسيلكتورال ('الإدخال [نوع= "مربع"]');
فار سيليكتدشيكبوكس = [];
إلى عن على (فار ط = 0; أنا < خانات.الطول ؛ أنا {) {
إذا (مربعات الاختيار [أنا].فحص) {
سيليكتدشيكبوكس.دفع (خانات الاختيار[أنا].القيمة);
}
}
وحدة التحكم.سجل (سيليكتدشيكبوكس);
في هذا المثال ، نحصل على جميع مربعات الاختيار في الصفحة باستخدام محدد الإدخال[النوع="مربع الاختيار"] ، ثم ننتقل إليها في حلقة. إذا تم تحديد مربع الاختيار ، فإننا نضيف قيمته إلى مجموعة مربعات الاختيار المحددة. نتيجة لذلك ، سنحصل على مجموعة من مربعات الاختيار المحددة.
وبالتالي ، باستخدام القيمة والخصائص المحددة ، يمكننا الحصول على البيانات من حقول النموذج في جافا سكريبت واستخدامها لمزيد من المعالجة.
التحقق من صحة بيانات النموذج
عند العمل مع نماذج جافا سكريبت ، من المهم ليس فقط الحصول على البيانات التي أدخلها المستخدم ، ولكن أيضا للتحقق من صحتها. يسمح لك التحقق من صحة البيانات بالتأكد من أن القيم المدخلة تفي بالمتطلبات والتنسيق المحدد لكل حقل إدخال.
يمكن التحقق من صحة بيانات النموذج باستخدام طرق مختلفة. دعونا ننظر إلى بعض منهم:
- التحقق من وجود قيمة فارغة. بالنسبة للحقول المطلوبة التي يجب ملؤها ، تأكد من عدم تركها فارغة.
- التحقق من الطول. قد تحتوي بعض الحقول ، مثل كلمة المرور أو الاسم ، على حد لعدد الأحرف. في هذه الحالة ، من الضروري التحقق من أن القيمة المدخلة تتوافق مع هذا القيد.
- التحقق من التنسيق. بعض الحقول ، مثل البريد الإلكتروني أو رقم الهاتف ، لها تنسيق محدد. إذا كانت القيمة المدخلة لا تتطابق مع هذا التنسيق ، فإنها تعتبر غير صحيحة.
- التحقق من نوع البيانات. بالنسبة لحقول الإدخال التي تتوقع نوعا معينا من البيانات ، مثل قيمة رقمية أو تاريخ ، تحتاج إلى التأكد من أن القيمة المدخلة هي تمثيل صالح من هذا النوع.
يمكن استخدام العوامل الشرطية والتعبيرات العادية للتحقق من صحة بيانات النموذج. هناك أيضا مكتبات وأطر عمل جاهزة توفر أدوات ملائمة للتحقق من صحة بيانات النموذج.
عند التحقق من صحة بيانات النموذج ، من الضروري مراعاة ليس فقط القواعد والقيود ، ولكن أيضا الاحتياجات والمتطلبات المحددة للتطبيق أو الخدمة التي يتم استخدام النموذج فيها. يساعد التحقق من صحة البيانات على منع الأخطاء وتحسين جودة تطبيق الويب أو موقع الويب.
| تحقق | مثال |
|---|---|
| التحقق من وجود فارغة | إذا (المدخلات.القيمة ===") { |
| فحص الطول | إذا (المدخلات.القيمة.الطول > الطول الأقصى) { |
| التحقق من وجود | إذا (!البريد الإلكتروني.اختبار (الإدخال.القيمة)) { |
| التحقق من نوع البيانات | إذا (نوع الإدخال.قيمة != = 'عدد') { |
توضح الأمثلة المقدمة تقنيات التحقق الأساسية لبيانات النموذج. قد تختلف شروط وقواعد التحقق المحددة اعتمادا على متطلبات النموذج ونوع البيانات المتوقعة في حقول الإدخال.
إرسال البيانات من النموذج إلى الخادم
عندما يملأ المستخدم نموذجا على صفحة ويب وينقر على زر الإرسال ، يمكن إرسال البيانات من النموذج إلى الخادم للمعالجة. يمكن تنفيذ عملية إرسال البيانات من النموذج إلى الخادم باستخدام لغة برمجة جافا سكريبت وتقنية أجاكس.
لإرسال البيانات من النموذج إلى الخادم باستخدام جافا سكريبت ، سوف تحتاج إلى استخدام طريقة زملتبركست أو جلب أبي. أولا ، يجب إنشاء كائن زملتبركست أو استخدام وظيفة الجلب لإنشاء طلب هتب.
- أدخل عنوان ورل الذي تريد إرسال البيانات إليه في الخاصية المفتوحة لكائن زملتبركست أو وظيفة الجلب. على سبيل المثال:
- شملتبركست:
- جلب أبي:
- إذا تم استخدام كائن زملتبركست ، استدعاء طريقة إرسال وتمرير بيانات النموذج كمعلمة. على سبيل المثال:
- على الخادم ، يمكنك الحصول على البيانات من النموذج وإجراء العمليات اللازمة ، مثل الحفظ في قاعدة بيانات أو إرسال بريد إلكتروني.
| شر | . | فتح | ( | "بوست" ، "http://example.com /" ، صحيح | ) | ; |
| جلب | ( | "http://example.com /" ، { الطريقة: "مشاركة"} | ) | ; |
| شر | . | إرسال | ( | فورمداتا | ) | ; |
سؤال وجواب
ما هي طرق كائن المستند في جافا سكريبت?
طرق كائن المستند هي وظائف يمكن استدعاؤها لإجراء عمليات مختلفة على مستند هتمل. على سبيل المثال ، باستخدام أساليب المستند ، يمكنك الحصول على عناصر على صفحة من خلال معرفاتهم أو علاماتهم أو محدداتهم ، وتغيير محتوى هتمل الخاص بهم ، وإضافة عناصر جديدة ، وأكثر من ذلك بكثير.