فصل پیوست ۳: آشنایی با Validatorهای عددی

Introduction to Numerical Validators

با سلام! در جلسه قبل در مورد ارائه فیدبک صحیح به کاربر از طریق UI برنامه صحبت کردیم و در این جلسه می خواهیم با validator های بیشتری آشنا شویم اما قبل از آن باید نکته ای را گوشزد کنم. پس از مطالعه جلسه قبل ممکن است بگویید ما از همان ابتدای تایپ، ایمیل را خطا می گیریم که از نظر UX اصلا مناسب نیست. یعنی به محض شروع به تایپ کردن، فیلد قرمز می شود بنابراین راه حل چیست؟ اگر یادتان باشد ما برای صدا زدن متد touch$ از رویداد input@ استفاده کرده بودیم اما استفاده از آن الزامی نیست بلکه می توانیم از هر رویداد دیگری مانند blur@ استفاده کنیم. این رویداد که مربوط به Vue.js است و به پکیج vulidate ربطی ندارد، زمانی اجرا می شود که input ما focus خود را از دست بدهید (زمانی که کاربر درون فیلد در حال تایپ است اما با کلیک در خارج از فیلد، از آن خارج می شود - باید با مبحث focus که از مفاهیم ابتدایی زبان CSS است آشنا باشید). بنابراین:

<div class="input" :class="{invalid: $v.email.$error}">
  <label for="email">Mail</label>
  <input type="email" id="email" @blur="$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>

حالا فقط زمانی هشدارها را نمایش می دهیم که Focus از بین برود. می توانید این کد را در مرورگر خودتان تست کنید. در نهایت به یاد داشته باشید که همه چیز بستگی به این دارد که چه زمانی touch$ را صدا بزنید. یعنی حتی ممکن است نخواهید از رویداد ها استفاده کنید بلکه یک دکمه (button) ساده را قرار بدهید که هنگام کلیک شدن، متد touch$ را اجرا کند. بنابراین زمانی که به نظر شما زمان مناسبی برای اعتبارسنجی یک فیلد است، باید touch$ را صدا بزنید، حالا به هر شکلی که باشد. اما برویم سراغ validator ها ...

فرض کنید برنامه ما فقط افرادی با سن قانونی (18 سال به بالا) را قبول می کند. چطور می توانیم این کار را برای فیلد age انجام دهیم؟ در ابتدا باید یک rule set (مجموعه قانون) را برای فیلد age تعریف کنیم (مثل همیشه در فایل signup.vue هستیم):

validations: {
  email: {
    required,
    email
  },
  age: {
    
  }
}

اگر یادتان باشد حتما باید نام این rule set را age بگذاریم چرا که فیلد مربوط به آن با v-model به خصوصیت age در data متصل شده است و نام rule set های ما همیشه باید با نام خصوصیات متصل به v-model یکی باشد. حالا برای اینکه بخواهیم قوانینی را برای age بنویسیم باید دو validator دیگر را در این فایل import کنیم:

<script>
import { required, email, numeric, minValue } from "vuelidate/lib/validators";

export default {
  data() {
// بقیه کد ها //

numeric (به معنی «عددی») مشخص می کند که مقدار ما حتما عددی باشد و minValue حداقل مقدار یک فیلد را مشخص خواهد کرد. حالا می توانیم از این validator ها استفاده کنیم:

validations: {
  email: {
    required,
    email
  },
  age: {
    required,
    numeric,
    minVal: minValue(18)
  }
},

من ابتدا از required استفاده کرده ام و سپس numeric را قرار داده ام اما minValue با بقیه فرق داشته و یک تابع است بنابراین نمی توانیم از روش خلاصه ES6 برای تایپ آن استفاده کنیم. شما باید یک نام دلخواه (من minVal را گذاشته ام) به عنوان key انتخاب کرده و خودِ minValue را به عنوان یک تابع صدا بزنید و مقدار خود را به آن پاس بدهید. من در اینجا گفته ام که حداقل مقدار تایپ شده در فیلد ما باید 18 باشد (یعنی یا 18 یا بالاتر). حالا می توانیم به input مربوط به age برویم و این validator را به آن متصل کنیم:

<div class="input" :class="{invalid: $v.age.$error}">
  <label for="age">Your Age</label>
  <input type="number" id="age" @blur="$v.age.$touch()" v-model.number="age" />
</div>

همانطور که می بینید این کد نیز دقیقا مانند جلسات قبل نوشته شده و هیچ چیز جدیدی ندارد. من در اینجا پاراگراف هایی را ایجاد می کنم که به کاربر بگویم مقدار وارد شده چه اشکالاتی دارد:

<div class="input" :class="{invalid: $v.age.$error}">
  <label for="age">Your Age</label>
  <input type="number" id="age" @blur="$v.age.$touch()" v-model.number="age" />
  <p
    v-if="!$v.age.minVal"
  >You have to be at least {{ $v.age.$params.minVal.min }} years old.</p>
</div>

ابتدای این <p> که با v-if نوشته شده است بسیار ساده است و قبلا هم آن را دیده ایم، فقط حواستان باشد که minVal همان key ما است و خودِ validator که به عنوان value قرار گرفته بود، نام minValue را دارد. تنها چیزی که در این پاراگراف جدید است دریافت، آرگومان داده شده به تابع minValue است. برای این کار از v.age$ استفاده کرده ایم و سپس خصوصیتی به نام params$ را هدف گرفته ایم. این خصوصیت تمام پارامترها یا آرگومان های تمام validator های ما را در خود دارد بنابراین باید از minVal استفاده کنیم تا به validator خاصی دسترسی داشته باشیم. پس از آنکه به minVal رسیدیم، باید خصوصیتی به نام min را بگیریم که همان آرگومان پاس داده شده به minValue (عدد 18) است. بنابراین کد نهایتا می گوید «شما باید حداقل 18 سال داشته باشید».

در ابتدا احتمالا این ساختار کمی برایتان عجیب است اما باید با vuelidate کار کنید تا با آن آشنا شوید. همچنین در هر جایی از مسیر که نمی دانستید چه کار کنید، مانند زمانی که v$ را چاپ کردیم، مقادیر مختلف را چاپ کنید تا متوجه بشوید. مثلا در کد بالا می توانستیم v.age.$params$ را چاپ کنیم تا ببینیم داخل آن چه چیزی وجود دارد:

<div class="input" :class="{invalid: $v.age.$error}">
  <label for="age">Your Age</label>
  <input type="number" id="age" @blur="$v.age.$touch()" v-model.number="age" />
  <p
    v-if="!$v.age.minVal"
  >You have to be at least {{ $v.age.$params.minVal.min }} years old.</p>
  <p>{{$v.age.$params}}</p>
</div>

حالا در مرورگر چنین چیزی را می بینیم:

پارامتر های موجود را چاپ می کنیم تا بدانیم چه پارامتر هایی را داریم

بنابراین می فهمیم که باید به خصوصیت min دسترسی داشته باشیم. به هر حال از هر پکیجی که در پروژه هایتان استفاده کنید، باید زمان بگذارید تا با ساختار آن آشنا شوید اما این ساختارها معمولا بسیار ساده هستند و وقت زیادی از شما نمی گیرند.