
در جسله قبل با validator های numeric و minValue برای age (سن) آشنا شدیم که هر دو از Validator های عددی هستند. در این جلسه می خواهیم روی فیلد password یا رمز عبور تمرکز کنیم. تفاوت جالبی که فیلد password با فیلدهای دیگر دارد، در این است که رمز های عبور در دو فیلد مختلف تایپ شده و سپس باید با هم بررسی شوند تا حتما یکسان باشند. فیلد دوم معمولا برای آن قرار داده می شود که مطمئن شویم کاربر رمز خود را به صورت اشتباه وارد نکرده است و موافقان و مخالفان خود را دارد. ما در این جلسه به دلایل آموزشی، از این روش استفاده خواهیم کرد.
در قدم اول باید به قسمت script رفته و یک rule set (مجموعه قانون) را برای فیلد اول password تعریف کنیم. مثل همیشه در فایل signup.vue هستیم و می گوییم:
<script> import { required, email, numeric, minValue, minLength } from "vuelidate/lib/validators";
ما در اینجا validator جدیدی به نام minLength را وارد کرده ایم. تفاوت minValue و minLength در آنجاست که minValue برای مقادیر عددی به کار می رود (مثلا 25 کمتر از 35 است) اما minLength برای مقادیر رشته ای به کار می رود و تعداد کاراکترهای یک رشته را در نظر می گیرد (مثلا Roxo تعداد کاراکتر بیشتری از ir دارد). بنابراین می توانیم از minLength استفاده کرده و حداقل تعداد کاراکترهای پسورد کاربر را تعیین کنیم:
validations: { email: { required, email }, age: { required, numeric, minVal: minValue(18) }, password: { required, minLen: minLength(6) } }
مثل همیشه required را داریم و minLength را نیز مانند minValue به شکل یک تابع تعریف کرده ایم. من حداقل طول یک password را 6 کاراکتر تعیین کرده ام چرا که firebase نیز همین محدودیت را دارد و رمزهای عبور کمتر از 6 کاراکتر را قبول نمی کند. حالا می توانیم به input رفته و این قانون را به فیلد اول password متصل کنیم:
<div class="input" :class="{invalid: $v.password.$error}"> <label for="password">Password</label> <input type="password" id="password" @blur="$v.password.$touch()" v-model="password" /> </div>
این کد بدون مشکل کار می کند اما باید آن را با فیلد دوم password نیز مقایسه کنیم. برای این کار باید یک rule set دیگر ایجاد کنیم. در ابتدا باید یک validator جدید را وارد فایل کنیم:
<script> import { required, email, numeric, minValue, minLength, sameAs } from "vuelidate/lib/validators";
validator جدید ما به نام sameAs (به معنی «یکسان با») مسئول بررسی دو مقدار است که اولی با دومی یکسان باشد. حالا می توانیم rule set خود را تعریف نماییم:
validations: { email: { required, email }, age: { required, numeric, minVal: minValue(18) }, password: { required, minLen: minLength(6) }, confirmPassword: { sameAs: sameAs() } }
sameAs نیز یک تابع است که باید مانند یک تابع صدا زده شود. درون این validator می توانیم دو نوع داده وارد کنیم. نوع اول یک property (خصوصیت) از قسمت data برنامه است. یعنی اینجا:
data() { return { email: "", age: null, password: "", confirmPassword: "", country: "usa", hobbyInputs: [], terms: false }; }
فعلا از همین نوع اول استفاده کرده و می گوییم:
confirmPassword: { sameAs: sameAs("password") }
در ضمن نیازی به اضافه کردن required و minLength نیست. چرا؟ به دلیل اینکه گفته ایم confirmPassword باید با password یکی باشد بنابراین required بودن و طول حداقلی 6 کاراکتر، نیز برای آن اعمال می شوند. حالا می توانیم این rule set را به input دوم رمز عبور متصل کنیم:
<div class="input" :class="{invalid: $v.confirmPassword.$error}"> <label for="confirm-password">Confirm Password</label> <input type="password" id="confirm-password" @blur="$v.confirmPassword.$touch()" v-model="confirmPassword" /> </div>
حالا اگر به مرورگر بروید و این کدها را تست کنید، همه چیز به خوبی کار می کند (هر دو فیلد باید یکسان باشند و گرنه خطا می گیریم). این نوع اول داده هایی بود که می توانیم به sameAs پاس بدهیم. دومین نوع داده ای که می توانیم پاس بدهیم، یک تابع است! این تابع یک آرگومان را به صورت خودکار دریافت می کند که همان Vue Instance یا شیء Vue در این کامپوننت است (معمولا vm نامیده می شود اما می توانید هر نامی را برایش انتخاب کنید):
confirmPassword: { // sameAs: sameAs("password") sameAs: sameAs(vm => { return vm.password; }) }
همانطور که می بینید ما باید property (خصوصیت) مقایسه شده را return کنیم. حتما می پرسید چرا چنین چیزی وجود دارد و فایده آن چیست؟ مقایسه ها فقط برای فیلد های password نیست و در برخی از اوقات ممکن است هدف ما بیشتر از یک مقایسه ساده باشد. مثلا:
confirmPassword: { // sameAs: sameAs("password") sameAs: sameAs(vm => { return vm.password + "roxo"; }) }
من روش اول را کامنت کرده ام تا با روش اول تداخل ایجاد نکند. کد بالا می گوید رمزی که درون confirmPassword (فیلد دوم password) وارد می کنیم باید برابر با password اصلی به علاوه رشته roxo باشد. مثلا:
myPassword
myPasswordroxo
تنها در این صورت است که خطا نمی گیریم. البته این کار برای رمز عبور به هیچ عنوان منطقی و صحیح نیست و قصد من فقط ارائه یک مثال ساده بود بنابراین آن را به حالت قبلی برمی گردانم. اینکه شما از کدام یک از این روش ها استفاده کنید، کاملا به خودتان بستگی دارد. من هر دو روش را ارائه کردم چرا که روش دوم دارای قابلیت شخصی سازی بیشتری است، بنابراین ممکن است در موقیعت های خاص به درد شما بخورد. همچنین توجه داشته باشید که در روش دوم، لازم نیست که حتما از arrow function ها استفاده کنید بلکه می توانید از function های عادی ES5 نیز استفاده نمایید:
confirmPassword: { // sameAs: sameAs("password") sameAs: sameAs(function(vm) { return vm.password + "roxo"; }) }
امیدوارم از این جلسه به خوبی استفاده کرده باشید. در آینده با validator های بیشتری آشنا خواهیم شد.
- نصب و راهاندازی فریمورک 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