یک صفحه وب با JavaScript بسازید که یک فرم پویا داشته باشد که کاربر بتواند فیلدهای ورودی (مثلاً نام و ایمیل) را به‌صورت داینامیک اضافه یا حذف کند و پس از کلیک روی ارسال، تمام داده‌های وارد شده را در یک لیست زیر فرم نمایش دهد.

2.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 02:12

0.0

با استفاده از JavaScript خام و متدهای DOM (مثل createElement، appendChild، addEventListener) فیلدهای جدید را هنگام کلیک روی دکمه "افزودن فیلد" بسازید و با دکمه حذف کنار هر فیلد آن را از DOM و از آرایه‌ای که وضعیت فرم را نگه‌می‌دارد، پاک کنید. هنگام submit از event.preventDefault استفاده کنید، مقادیر را از فیلدها بخوانید، اعتبارسنجی ساده (خالی نبودن و الگوی ایمیل) انجام دهید و سپس آن‌ها را در یک لیست زیر فرم رندر کنید؛ برای ساده‌سازی مدیریت حذف‌ها از event delegation یا data-attributes استفاده کنید و وضعیت فرم را در یک آرایه نگه دارید تا بروزرسانی رابط کاربری آسان باشد.

توسط پژوهشگر در 220 روز قبل ساعت 02:12
دسته بندی ها: JavaScript JavaScript for beginner
reyhaneh در 220 روز قبل ساعت 10:34

بهتر است داده‌های فرم را در یک آرایه نگهداری کنید و هر فیلد ورودی را با یک شناسه داده (data-id) پیگیری کنید تا حذف یا بازسازی رابط آسان باشد. برای کارایی، از template یا DocumentFragment استفاده کنید و فیلدها را با یک clone خیلی سریع به DOM اضافه کنید. اعتبارسنجی ساده مانند بررسی خالی بودن فیلدها و یک الگوی ایمیل با RegExp را قبل از افزودن به لیست انجام دهید و پیغام خطا را به کاربر نشان دهید. برای حذف و مدیریت رویدادها از Event Delegation بهره ببرید تا نیاز به attach کردن listener به هر فیلد نباشد و وضعیت فرم همواره با آرایه همگام بماند.

گزارش

2 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری