دوره مجازی جاوااسکریپت (جلسه 29): پروژه - کدنویسی پلاگین اعتبارسنجی فرم ها (Form Validation)

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۲ دقیقه
۲۲ آبان ۱۳۹۴

یکی از مهمترین اهداف استفاده از جاوااسکریپت در صفحات وب اعتبارسنجی فرم هاست. اعتبارسنجی فرم ها به این معنی هست که ما اجازه ندیم کابرها اطلاعات فرم ها رو به صورت غیرمعتبر و غیر واقعی وارد کنند. در پروژه امروز که سومین پروژه از دوره جامع آموزش جاوااسکریپت و جی کوئری هست یک پلاگین بسیار جالب و کاربردی رو با هم خواهیم نوشت. خروجی پروژه امروزمون چیزی شبیه زیر هست. در تصویر زیر فرم با برخی اطلاعات نادرست پر شده و دکمه register زده شده. همونطور که می بینید پلاگین ما خطاهای مربوط به ورودی های کاربر رو بهش گوشزد می کنه !

formValidation

مطالب مطرح شده در این جلسه عبارتند از :

  • پروژه اعتبارسنجی فرم ها - html form validation
  • توضیح در مورد اهمیت اعتبارسنجی و وظیفه جاوااسکریپت در این زمینه
  • توضیح ساختار پروژه و تشریح نحوه استفاده و کدنویسی html و css پروژه
  • تعین کلاس برای باکس (div) نمایش خطاهای ورودی
  • نحوه دریافت نام فیلد از خصوصیت های فیلدهای ورودی
  • تعین مکان نمایش خطاها (ابتدا یا انتهای فرم)
  • اعتبارسنجی ایمیل
  • اعتبارسنجی آدرس وبسایت و url ها
  • اعتبارسنجی فیلدهای خالی
  • اعتبارسنجی و تعین حداقل و حداکثر کاراکترهای ورودی کاربر
  • اعتبارسنجی و تعین بازه اعداد صحیح ورودی کاربر
  • آموزش نحوه ایجاد اعتبارسنجی جدید و افزودن آن به پروژه این جلسه
  • بررسی و مرور نکات مهم و ویژه پروژه این جلسه
:: توجه

این مطلب یک جلسه از آموزش javascript می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

hashem

سلام جناب آوند عزیز وقتتون بخیر
شما در این درس در تابعی که با متد extend معرفی شده پراپرتی تعریف کردید به نام fieldNameattr که مقدارش رو برابر رشته “name” قراردادید و از این ویژگی برای تعریف متغیر fName هم استفاده کردید که برام جالب بود مقدار رشته “name ” به اتریبیوت با همین نام اشاره می کرد که برام قابل فهم نبود
اگر امکانش هست بهم توضیح بدبد دلیلش چیه خواهشا ؟؟

hashem

ببخشید فکر کنم جوابش رو فهمیدم ببخشید عجله می کنم

Masoud Azimi

آقااا … من باید این جلسه رو تو چند کلمه بگم:::

Amazing
Terrific
Excellent
Great
Superior
Fantastic
Fabulous
Awesome
Inestimable

در آخر هم از Google Translate تشکر ویژه میکنم!!!

لقمان آوند

ممنون از شما و گوگل ترنزلیت ;D

لقمان آوند

می تونید کل کدتون رو در یک صفحه html برای من ایمیل کنید که ببینم …

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

شما هم چنان می توانید سوالات خود را در این قسمت بپرسید اما اولویت پاسخ گویی با دانشجویانی است که بازه پشتیبانی فعال دارند.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل