دوره مجازی جاوااسکریپت (جلسه 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

دانشجو

سلام استاد آوند عزیز
از این پلاگین روی یه پروژه ای میخوام استفاده کنم ارور داره و درست اجرا نمیشه توی کنسول این ارور هست

 Uncaught TypeError: vldStrings[i].trim is not a function

احتمالا با کتابخانه های دیگه دچار مشکل میشه چطوری میتونیم رفعش کنیم؟
تشکر

لقمان آوند

سلام
این ارور میگه تابع trim روی مقدار موجود در آرایه قابل اعمال نیست. باید ببینید چه مقداری گرفته . اگر تونستید فایل مربوطه رو برای من ایمیل کنید که ببینم.

دانشجو

مشکلش رو فهمیدم با چی تداخل داره با کتابخانه mootools تداخل داره این رو که غیر فعال میکنم کار میکنه چطوری میشه تداخلشون رو رفع کرد؟

دانشجو

همه روشهای استفاده از jQuery.noConflict رو تست کردم ولی بازم باعث رفع ارور نمیشه نمیدونم چرا ارور رو رفع نمیکنه

لقمان آوند

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

لقمان آوند

سلام
خوب از متد jQuery.noConflict که در دوره جاوااسکریپت و جی کوئری گفتیم استفاده کنید.

دانشجو

سلام
هر مقداری وارد میکنم این خطا رو میده حتی تمامی فیلدهای فرم رو خالی قرار میدم و ارسال رو که میزنم فرم ارسال میشه و اخطار و جلوگیری از ارسال فرم صورت نمیگیره
البته اینم بگم دقیقا همین فرم رو روی یه سایت و قالب دیگه استفاده کردم بدون مشکل کار میکنه

لقمان آوند

خوب پس احتمالا با کتابخانه یا کدهای جاوااسکریپت دیگه تداخل داره … باید یکی یکی فایلای دیگه به جز جی کوئری رو حذف کنید و ببنید حذف کدوم یکی باعث کار کردنش میشه …

Sahar Dida

سلام،خسته نباشید
ساختار emailregex و… رو خود برنامه نویس باید بنویسه یا میتونه از ساختارهای آماده که تو سطح وب هست استفاده کنه؟

لقمان آوند

سلام
از ساختارهای استاندارد و آماده که در سطح نت وجود داره هم می تونید استفاده کنید.

hassani

سلام عالی بود خیلی کاربردی بود.
البته درمورد lookbehind که قولش داده بودین توضیح ندادین.
تشکر

لقمان آوند

ممنون
ایشالله برای جلسه آخر …

Shahryar Tavakkoli

درود خدمت شما تاریخ ارسال پستی مشخص شده ؟

وحید صالحی

سلام حدودا ۱۰ روز پس از پایان دوره

Shahryar Tavakkoli

چون حال آقای اوند مناسب نبودن و ویدیو ها بسیار کند پیش می ره شما نظری دارید که تقریبا در چه تاریخی تمام می گردد ؟

وحید صالحی

تا قبل از 10 آذر ارسال میشه نگران نباشید

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

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

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

نیاز به لاگین

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