
در قسمت قبل به شما توضیح دادم که پکیج vuelidate از پکیج های معروف Vue.js برای اعتبارسنجی فرم ها است اما برای آشنایی بهتر با آن، شیء v$ را که توسط این پکیج ارائه می شد در کنار input خودمان (در فایل signup.vue) چاپ کردیم تا خروجی آن را ببینیم:
<div class="input"> <label for="email">Mail</label> <input type="email" id="email" @input="$v.email.$touch()" v-model="email" /> <div>{{ $v }}</div> </div>
زمانی که این کد را در مرورگر اجرا می کردیم، اطلاعات زیر برایمان چاپ می شد:
{ "email": { "required": false, "email": true, "$model": "", "$invalid": true, "$dirty": false, "$anyDirty": false, "$error": false, "$anyError": false, "$pending": false, "$params": { "required": { "type": "required" }, "email": { "type": "email" } } }, "$model": null, "$invalid": true, "$dirty": false, "$anyDirty": false, "$error": false, "$anyError": false, "$pending": false, "$params": { "email": null } }
بنابراین می دانیم که به این خصوصیات دسترسی خواهیم داشت اما چاپ کردن یک شیء جاوا اسکریپتی بدین شکل اصلا مناسب نیست و ظاهر UI را کاملا بهم می ریزد بنابراین بهتر است راهی ایجاد کنیم که فیدبک خود به کاربر را در همان UI و با ظاهری مناسب بدهیم. در قدم اول باید کد چاپ v$ را حذف کنیم. سپس به سراغ div اصلی Email می رویم که هم input و هم label را در خود دارد و در آنجا می گوییم اگر روی فیلد email خطا یا error$ ای وجود داشت، کلاس invalid را به این div متصل کن:
<div class="input" :class="{invalid: $v.email.$error}"> <label for="email">Mail</label> <input type="email" id="email" @input="$v.email.$touch()" v-model="email" /> </div>
اگر یادتان باشد برای متصل کردن کلاس های CSS به صورت شرطی می توانستیم class را با v-bind بنویسیم و سپس یک شیء جاوا اسکریپتی به آن پاس بدهیم. key این شیء، برابر نام آن کلاس خواهد بود و value نیز باید شرط شما برای اتصال کلاس باشد. همچنین در نظر داشته باشید که در ایجا از invalid به جای Error استفاده نکنید. اگر از invalid استفاده کنید، از همان بارگذاری اولیه فرم، فیلد ما دارای خطا محسوب می شود (چرا که چیزی درون فیلد ایمیل نیست) اما ما می خواهیم فقط زمانی که کاربر در این فیلد تایپ کرده است، خطاهایش را نمایش بدهیم. همچنین این کد به تنهایی کار خاصی نمی کند چرا که اصلا کلاسی به نام invalid نداریم بنابراین در همین فایل (signup.vue) به قسمت <style> می روم و می گویم:
.input.invalid input { border: 1px solid red; background-color: #ffc9aa; } .input.invalid label { color: red; }
یعنی اگر کلاس input و invalid روی یک input یا label بود به شکل بالا border و background-color آن را تغییر خواهیم داد. حالا اگر به مرورگر برویم و یک مقدار اشتباهی را به عنوان ایمیل وارد کنیم، فیلد قرمز خواهد شد:

اما اگر ایمیل را کامل وارد کنم خطا از بین می رود. البته هنوز می توانیم این سیستم را بهتر کنیم. مثلا در زیر input ایمیل، یک تگ <p> قرار می دهیم که خطای رخ داده شده در آن توضیح داده شود:
<div class="input" :class="{invalid: $v.email.$error}"> <label for="email">Mail</label> <input type="email" id="email" @input="$v.email.$touch()" v-model="email" /> <p v-if="$v.email.$error">Please provide a valid email adress.</p> </div>
من در اینجا گفته ام که این پاراگراف که حاوی متن «لطفا یک ایمیل معتبر را ارائه دهید» است فقط زمانی نمایش داده شود که email.$error داشته باشیم. بنابراین با یک v-if ساده جلوی نمایش همیشگی آن را گرفته ایم. من این کد را در مرورگر تست می کنم و به محض وارد کردن ایمیل اشتباه، این پاراگراف برایم نمایش داده می شود:

اما به محض وارد کردن ایمیل صحیح، این پاراگراف از بین می رود. البته در حال حاضر این پیام زمانی نمایش داده می شود که ایمیل وارد شده یا نامعتبر باشد یا اصلا ایمیلی در فیلد email تایپ نشده باشد (مثلا کاربر ایمیل را نوشته و بعدا آن را حذف کرده است). اگر می خواهید این پیام فقط زمانی نمایش داده شود که فیلد email پر شده باشد اما آدرس وارد شده یک آدرس معتبر نباشد، باید به شکل زیر عمل کنید:
<div class="input" :class="{invalid: $v.email.$error}"> <label for="email">Mail</label> <input type="email" id="email" @input="$v.email.$touch()" v-model="email" /> <p v-if="!$v.email.email">Please provide a valid email adress.</p> </div>
حتما می پرسید که email.email یعنی چی؟! من در ابتدای این جلسه برایتان توضیح دادم که در شیء v$ به مقادیر زیر دسترسی داریم:
{ "email": { "required": false, "email": true, "$model": "", "$invalid": true, "$dirty": false, "$anyDirty": false, "$error": false, "$anyError": false, "$pending": false, "$params": { "required": { "type": "required" }, "email": { "type": "email" } } }, "$model": null, "$invalid": true, "$dirty": false, "$anyDirty": false, "$error": false, "$anyError": false, "$pending": false, "$params": { "email": null } }
این شیء JSON کمی بهم ریخته است بنابراین شاید بهتر باشد که آن را باز کنیم تا بهتر دیده شود:
{ "email": { "required": false, "email": true, "$model": "", "$invalid": true, "$dirty": false, "$anyDirty": false, "$error": false, "$anyError": false, "$pending": false, "$params": { "required": { "type": "required" }, "email": { "type": "email" } } }, "$model": null, "$invalid": true, "$dirty": false, "$anyDirty": false, "$error": false, "$anyError": false, "$pending": false, "$params": { "email": null } }
همانطور که می بینید در اینجا درون email به یک خصوصیت دیگر به نام Email دسترسی داریم. email اول ما در کد بالا، به دسته قوانین فیلد email اشاره می کند که توسط خود ما تعریف شده بود:
validations: { email: { required, email } }
اما email دوم که درون email اول قرار دارد، مشخص کننده اعتبار ایمیل وارد شده است. یعنی آیا ایمیلی که کاربر وارد کرده است معتبر می باشد و ساختار صحیحی دارد؟ بدین صورت می توانیم فقط ایمیل بودن رشته وارد شده در فیلد email را بررسی کنیم. حالا کد اصلی ما معنی پیدا می کند:
<p v-if="!$v.email.email">Please provide a valid email adress.</p>
اگر رشته وارد شده ایمیل نبود (علامت تعجب در ابتدای شرط، آن را برعکس می کند) این پاراگراف را نمایش بده. همچنین اگر می خواهید در هنگام خالی بودن فیلد، یک پیام دیگر نشان بدهیم می توانیم بگوییم:
<div class="input" :class="{invalid: $v.email.$error}"> <label for="email">Mail</label> <input type="email" id="email" @input="$v.email.$touch()" v-model="email" /> <p v-if="!$v.email.email">Please provide a valid email adress.</p> <p v-if="!$v.email.required">This field must not be empty.</p> </div>
در اینجا بعد از email به خصوصیت required دسترسی پیدا کرده ایم و گفته ایم اگر فیلد ایمیل خالی بود، این پیام را نمایش بده.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI