در قسمت قبل به شما توضیح دادم که پکیج vuelidate از پکیج های معروف Vue.js برای اعتبارسنجی فرم ها است اما برای آشنایی بهتر با آن، شیء v$ را که توسط این پکیج ارائه می شد در کنار input خودمان (در فایل signup.vue) چاپ کردیم تا خروجی آن را ببینیم. زمانی که این کد را در مرورگر اجرا می کردیم، اطلاعات زیر برایمان چاپ می شد. بنابراین می دانیم که به این خصوصیات دسترسی خواهیم داشت اما چاپ کردن یک شیء جاوا اسکریپتی بدین شکل اصلا مناسب نیست و ظاهر UI را کاملا بهم می ریزد بنابراین بهتر است راهی ایجاد کنیم که فیدبک خود به کاربر را در همان UI و با ظاهری مناسب بدهیم. در قدم اول باید کد چاپ v$ را حذف کنیم. سپس به سراغ div اصلی Email می رویم که هم input و هم label را در خود دارد و در آنجا می گوییم اگر روی فیلد email خطا یا error$ ای وجود داشت، کلاس invalid را به این div متصل کن. اگر یادتان باشد برای متصل کردن کلاس های CSS به صورت شرطی می توانستیم class را با v-bind بنویسیم و سپس یک شیء جاوا اسکریپتی به آن پاس بدهیم. key این شیء، برابر نام آن کلاس خواهد بود و value نیز باید شرط شما برای اتصال کلاس باشد. همچنین در نظر داشته باشید که در ایجا از invalid به جای Error استفاده نکنید.
پنل نویسندگان