رفتن به نوشته‌ها

دسته: Vue js (ویو جی اس)

فریم‌ورک‌های فراوانی برای توسعه‌دهندگان سمت کاربر (Front-End) وجود دارند که هریک بسته به نیاز و سبک کدنویسی، انتخاب می‌شوند. امروزه توسعه‌دهندگان به دنبال فریم‌ورک‌هایی هستند که علاوه بر قواعد ساختاری قدرتمند، روند آموزشی ساده‌ای داشته باشند. فریم‌ورک Vuejs (با تلفظ ویو‌جی‌اس) یکی از بهترین‌ها در نوع خودش است.

فصل پیوست ۳: فصل جدید، اعتبارسنجی داده‌های کاربر

به فصل جدید خوش آمدید. راه های زیادی برای اعتبارسنجی داده های کاربران وجود دارد اما در Vue پکیجی به نام Vuelidate وجود دارد که به طور اختصاصی برای اعتبارسنجی فرم ها نوشته شده است. ما در این فصل می خواهیم با استفاده از این پکیج با برخی از روش های اعتبارسنجی فرم ها آشنا شویم. قدم اول نصب این پکیج است. ما می خواهیم فرم صفحه ی Sign up از پروژه ی فصل قبل (دانلود کنید) را اعتبارسنجی کنیم. در قدم اول باید مطمئن شویم که قسمت Email خالی نباشد و همچنین مقدار وارد شده یک ایمیل معتبر باشد. این فرم در فایل signup.vue قابل مشاهده می باشد و قسمت ایمیل آن به شکل زیر است. قبل از اینکه بخواهیم اعتبارسنجی را شروع کنیم باید وارد فایل main.js شده و پکیج vuelidate را import کنیم سپس از Vue.use برای فعال کردن vuelidate استفاده می کنیم. از این به بعد می توانیم در اشیاء Vue خود یک خصوصیت جدید به نام validations اضافه کنیم. ما می توانیم به signup.vue رفته و این کار را می کنیم. خصوصیت validations در حالت پیش فرض توسط vue شناخته نمی شود اما حالا که vuelidate را نصب کرده ایم هیچ مشکلی نخواهیم داشت. نکته ی مهمی در مورد این خصوصیت وجود دارد. نام هایی (key هایی) که به validations داده می شود باید حتما همنام با خصوصیتی باشد که با v-model به Data شما متصل شده است. مثلا اگر می خواهیم input مربوط به ایمیل را اعتبارسنجی کنیم برای هدف دادن آن باید نام email را در validation بنویسیم: