یک صفحه وب با JavaScript بسازید که یک فرم پویا داشته باشد که کاربر بتواند فیلدهای ورودی (مثلاً نام و ایمیل) را بهصورت داینامیک اضافه یا حذف کند و پس از کلیک روی ارسال، تمام دادههای وارد شده را در یک لیست زیر فرم نمایش دهد.
2.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 02:12 0.0
با استفاده از JavaScript خام و متدهای DOM (مثل createElement، appendChild، addEventListener) فیلدهای جدید را هنگام کلیک روی دکمه "افزودن فیلد" بسازید و با دکمه حذف کنار هر فیلد آن را از DOM و از آرایهای که وضعیت فرم را نگهمیدارد، پاک کنید. هنگام submit از event.preventDefault استفاده کنید، مقادیر را از فیلدها بخوانید، اعتبارسنجی ساده (خالی نبودن و الگوی ایمیل) انجام دهید و سپس آنها را در یک لیست زیر فرم رندر کنید؛ برای سادهسازی مدیریت حذفها از event delegation یا data-attributes استفاده کنید و وضعیت فرم را در یک آرایه نگه دارید تا بروزرسانی رابط کاربری آسان باشد.
2 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
بهتر است دادههای فرم را در یک آرایه نگهداری کنید و هر فیلد ورودی را با یک شناسه داده (data-id) پیگیری کنید تا حذف یا بازسازی رابط آسان باشد. برای کارایی، از template یا DocumentFragment استفاده کنید و فیلدها را با یک clone خیلی سریع به DOM اضافه کنید. اعتبارسنجی ساده مانند بررسی خالی بودن فیلدها و یک الگوی ایمیل با RegExp را قبل از افزودن به لیست انجام دهید و پیغام خطا را به کاربر نشان دهید. برای حذف و مدیریت رویدادها از Event Delegation بهره ببرید تا نیاز به attach کردن listener به هر فیلد نباشد و وضعیت فرم همواره با آرایه همگام بماند.
گزارش