- مدرس دوره : سید ابوالفضل اوحدی زاده ( رزومه )
- تعداد ویدیوها : 8 ویدیو
- مدت زمان دوره : 5:37:00
- سطح دوره : مقدماتی
- وضعیت دوره : در حال برگزاری

آموزش اعتبارسنجی ورودی ها با Vue.js
آموزش اعتبارسنجی فرم با Vue.js | کارگاه تخصصی Validation ورودیها
در این کارگاه عملی و متمرکز، شما با اصول حرفهای اعتبارسنجی فرمها در Vue.js آشنا میشوید. ما با استفاده از یک فرم واقعی ثبتنام و ورود که با HTML و Vue پیادهسازی شده، تمام تمرکز خود را بر روی منطق اعتبارسنجی لحظهای (Real-time Validation) و تکنیکهای پیشرفته آن معطوف میکنیم.
نگران پیشنیازها نباشید! اگر با HTML، CSS یا JavaScript آشنایی کامل ندارید، جای نگرانی نیست. ما دوره را بهگونهای طراحی کردهایم که حتی اگر در یکی از این مباحث پایهای ضعف داشته باشید، نهتنها به مشکل برنمیخورید، بلکه به بهترین شکل ممکن مفاهیم را فرا خواهید گرفت.
سرفصلهای کلیدی این دوره:
ساخت اعتبارسنجیهای سفارشی (Custom Validation) با استفاده از Computed Properties در Vue
تشخیص و محدودسازی ورودیهای فارسی در فیلدهای لاتین (مانند نام کاربری)
اعتبارسنجی ایمیل و شماره تلفن با کمک عبارات منظم (Regex) و شرطهای ساده
نمایش پویا (Dynamic) و واکنشگرا (Reactive) پیامهای خطا و موفقیت
پیادهسازی سیستم نوتیفیکیشن (Notification System) همراه با انیمیشنهای Vue Transition
اسکرول خودکار به بخشهای موردنظر هنگام ورود به صفحه
جلوگیری از ارسال اطلاعات ناقص و بهبود تجربه کاربری (UX)
این دوره برای چه کسانی مناسب است؟
توسعهدهندگانی که با مبانی Vue.js آشنایی دارند و میخواهند اعتبارسنجی فرم را بهصورت عمیق و تخصصی بیاموزند
برنامهنویسانی که به پیادهسازی اعتبارسنجی فارسی و لحظهای در پروژههای خود نیاز دارند
پیش نیاز :
آشنایی با HTML , CSS , JavaScript , Vue.js
سرفصلهای تفصیلی دوره اعتبارسنجی فرم با Vue.js
بخش ۱: آشنایی با ساختار داده و اتصال دوطرفه
تعریف و مدیریت دیتای فرم (Form Data) در کامپوننتهای Vue
پیادهسازی اتصال دوطرفه (Two-way Binding) با استفاده از دایرکتیو v-model
بررسی اهمیت و مزایای اعتبارسنجی لحظهای (Real-time Validation) در بهبود تجربه کاربری و کاهش خطاهای ورودی
بخش ۲: پیادهسازی منطق اعتبارسنجی با Computed Properties
تشخیص و شناسایی حروف فارسی با استفاده از عبارات منظم (Regex) در Vue
محدودسازی ورودی فارسی در فیلدهای لاتین و اعمال بررسی فرمت استاندارد (Standard Format Checking)
اعمال محدودیت طول کاراکتر (Length Limitation) و ممنوعیت استفاده از علامت + در شماره تلفن
استفاده از شرطهای ترکیبی (Combined Conditions) برای نمایش پویای پیامهای خطا یا تأیید صحت ورودی
فهرستـــ ویدیوها
مدت زمان دوره 5:37:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
معرفی html , css , javascript , vuejs و اتصال Vuejs به پروژه و کادر ها
سلام به شما دوستان گلم امیدوارم حالتون خیلی خوب باشه ما توی این جلسه با html , css , javascript , vuejs آشنا شدیم و یاد گرفتیم چطوری vue را به پروژه متصل کنیم و چطوری کادر ها را به متغییر ها وصل کنیم
یادگیری Method , Computed , DOM
سلام به شما دوستان گلم امیدوارم حالتون خیلی خوب باشه ما توی این جلسه با Method و Computed توی Vuejs و با DOM آشنا شدیم و یاد گرفتیم.
Transition در VueJs و طراحی اعلان یا نوتیفیکیشن
سلام به شما هنرجویان گرامی امیدوارم حالتون خیلی خوب باشه ما توی این جلسه یک مثال کوچیک ساختیم(اعلان یا نوتیفیکیشن) و با همین مثال Transition در VueJs را یاد گرفتیم و نوتیفیکیشن پروژه مون را دیزاین کردیم
گذاشتن تایمر برای علان یا نوتیفیکیشن و دیزاین زیباتر برای علان یا نوتیفیکیشن
سلام خدمت شما هنرجویان گرامی امیدوارم حالتون خیلی خوب باشه ما توی این جلسه به اعلان یا نوتیفیکیشنمون تایمر دادیم که بعد از سه ثانیه یا هر چقدر خواستیم بره و با استفاده از شناسه تایمر روی اعلان یا نوتیفیکیشن که بزنیم حتی اگر تموم نشده بود تایمر پاک بشه و با پاک شدن تایمر اعلان یا توتیفیکیشن ما هم میره و ذیزاین زیباتری برای اعلان یا نوتیفیکیشن انجام دادم که زمان نمایش از بالا بیاد و زمان رفتن بره بالا
تکمیل علان یا نوتیفیکیشن و یادگیری Event Modifiers و اعتبار سنجی خالی بودن یا نبودن کادر ها
سلام خدمت شما هنرجویان گرامی امیدوارم حالتون خیلی خوب باشه ما توی این جلسه علان یا نوتیفیکیشن خودمون را تکمیل کردیم و یاد گرفیتم که Event Modifiers چیست و اعتبار سنجی خودمون را در حد خالی بودن یا نبودن کادر ها پیش بردیم. و تمرینی گذاشتیم که توی جلسه آینده حلش می کنیم و اینکه ما اگر نخواهیم برای هر کادر یک شرط بزاریم برای اعتبار سنجی چی کار کنیم که بهتر و تمیز تر باشه؟
تکمیل اعتبارسنجی خالی بودن کادر ها به بهترین شکل
سلام یه شما دانشجویان گرامی امیدوارم حالتون خیلی خوب ما توی این جلسه اول آرایه و حلقه for و حلقه for of رو یاد گرفتیم و با استفاده از آرایه و حلقه for of اعتبارسجی خودمون که کادر ها نباید خالی باشه انجام دادیم. ما از آرایه و حلقه for of استفاده کردیم که برای هر کادر یک دستور شرطی ننویسیم و کد ما تمیز تر و بهتر باشه. در جلسه بعدی ادامه اعتبار سنجی خودمون را انجام میدیم که میشه نام کاربری نباید داخل فارسی باشه و ایمیل معتبر باشه و شماره معتبر باشه و تکرار رمز عبور با رمز عبور یکی باشه و تیک گزینه قوانین خورده باشه و غیره...
ادامه اعتبار سنجی بخش 1
سلام خدمت شما هنرجویان گرامی امیدوارم حالتون خیلی خوب باشه. ما توی این جلسه Regex را یاد گرفتیم و ادامه اعتبار سنجی خودمون را انجام دادیم مثل : ایمیل معتبر و داخل ایمیل ایمیل فارسی نباشه و غیر و بخشی از اعتبارسنجی را انجام دادیم و بقیه آن را تمرین قرار دادیم و برای جلسه بعد ادامه اعتبار سنجی را پیش می بریم و تمام اعتبار سنجی های خودمون مثل خالی بودن کادر ها و بخشی از اعتبارسنجی را به بهترین شکل انجام دادیم و بقیه آن را جلسه بعدی انجام خواهیم داد.
مخصوص اعضای ویژه

نظرات کاربران در رابطه با این دوره