فصل پیوست ۳: آشنایی با requiredUnless

requiredUnless

در قسمت قبلی با اعتبار سنجی در فیلدهای password (رمز عبور) و confirmPassword (تایید رمز عبور) آشنا شدیم که کمی متفاوت از فیلد های عادی بودند چرا که باید در هر حالتی یکسان باشند. در این جلسه می خواهیم با validator جدیدی به نام required-unless آشنا شویم. همانطور که اطلاع دارید، یک Checkbox در فرم ما وجود دارد که مربوط به پذیرش Terms of Service (قوانین و خدمات سایت) می باشد:

<div class="input inline">
  <input type="checkbox" id="terms" v-model="terms" />
  <label for="terms">Accept Terms of Use</label>
</div>

ما می خواهیم اپراتور جدید را روی این checkbox پیاده کنیم. در مرحله اول می خواهم مطمئن شوم که این فیلد required (اجباری) است اما فقط برخی از کاربران. مثلا اگر کاربری از Germany (آلمان) بود نیازی نیست تیک این گزینه را بزند. فرض تخیلی ما این است که در آلمان قوانینی وجود دارد که به ما اجازه نمی دهد کاربر را مجبور به تایید چیزی کنیم. همانطور که بالاتر هم گفتم validator جدید ما در این جلسه required-unless است. کلمه unless در زمینه های مختلف، معانی متفاوتی می گیرد اما کلیت آن معمولا به معنی «مگر آنکه» است. با این حساب می توان فهمید که required-unless به معنی «اجباری است، مگر آنکه» می باشد که درک بهتری از این validator به ما می دهد.

قدم اول ما برای انجام این کار، تعریف یک rule set برای Checkbox است. مثلا همیشه در فایل signup.vue هستم و می گویم:

export default {
  data() {
    return {
      email: "",
      age: null,
      password: "",
      confirmPassword: "",
      country: "usa",
      hobbyInputs: [],
      terms: false
    };
  },
  validations: {
    email: {
      required,
      email
    },
    age: {
      required,
      numeric,
      minVal: minValue(18)
    },
    password: {
      required,
      minLen: minLength(6)
    },
    confirmPassword: {
      sameAs: sameAs("password")
      // sameAs: sameAs(vm => {
      //   return vm.password + "roxo";
      // })
    },
    terms: {
      required
    }
  }

تنها کاری که من انجام داده ام اضافه کردن Terms و سپس required بوده است بنابراین تا اینجا کار خاصی نکرده ایم. سپس باید این rule set را روی checkbox تنظیم کنیم بنابراین می گوییم:

<div class="input inline" :class="{invalid: $v.terms.$error}">
  <input type="checkbox" id="terms" @change="$v.terms.$touch()" v-model="terms" />
  <label for="terms">Accept Terms of Use</label>
</div>

در ابتدا class را با v-bind به div اصلی این input متصل کرده ام و گفته ام اگر terms دارای error$ بود، کلاس invalid را به این div متصل کن. همچنین از رویداد change (به معنی «تغییر») استفاده کرده ام تا اگر کاربر روی Checkbox کلیک کرد (یا به هر شکلی مقدارش را تغییر داد) متد touch$ اجرا شده و اعتبارسنجی آن انجام شود. حالا اگر برنامه را در مرورگر باز کنید، در نگاه اول هیچ خطایی دریافت نمی کنیم. چرا؟ به دلیل اینکه گفته ام اگر Terms.$error داشتیم، خطا به ما نمایش داده شود اما error$ به معنی invalid و dirty است. اگر یادتان رفته است باید بگویم که invalid یعنی معتبر بودن یک فیلد و dirty به معنای دست خوردن و تغییر کردن یک فیلد است. از آنجایی که در بارگذاری اولیه هنوز کاربر به هیچ چیزی دست نزده است، هیچ خطایی دریافت نخواهد کرد اما برای مواردی مانند «شرایط و قوانین» سایت بهتر است کد ها طوری باشد که حتما روی این مورد تاکید کنند. بنابراین من به جای error$ از invalid$ استفاده می کنم:

<div class="input inline" :class="{invalid: $v.terms.$invalid}">
  <input type="checkbox" id="terms" @change="$v.terms.$touch()" v-model="terms" />
  <label for="terms">Accept Terms of Use</label>
</div>

حالا اگر مرورگر را باز کنید در همان بارگذاری اولیه وب سایت، در قسمت terms of service خطا دریافت خواهید کرد. با این کار مطمئن می شویم که کاربران حتما این گزینه را دیده و متوجه می شوند که قبول کردن شرایط سایت الزامی است.

حالا که قسمت required را انجام داده ایم نوبت به قسمت unless می رسد. در مرحله اول باید آن را import کنیم:

import {
  required,
  email,
  numeric,
  minValue,
  minLength,
  sameAs,
  requiredUnless
} from "vuelidate/lib/validators";

حالا می توانیم در قسمت terms از آن استفاده کرده و به شکل زیر عمل کنیم:

terms: {
  required: requiredUnless(vm => {
    return vm.country === "germany";
  })
}

این validator نیز یک تابع است و vm (شیء vue) را دریافت می کند. من در شرط این validator گفته ام vm.country باید برابر Germany باشد. country نام خصوصیت country در data است که با v-model به منوی آبشاری کشور ها متصل شده است (عنصر <select> در کد زیر):

<div class="input">
  <label for="country">Country</label>
  <select id="country" v-model="country">
    <option value="usa">USA</option>
    <option value="india">India</option>
    <option value="uk">UK</option>
    <option value="germany">Germany</option>
  </select>
</div>

بنابراین اگر این کد را ذخیره کرده و به مرورگر برویم با صحنه جالبی روبرو خواهیم شد. در ابتدای بارگذاری برنامه، accept terms of service قرمز است که یعنی خطا داریم و اگر تیک آن را فعال کنیم رنگ قرمز از بین می رود و دیگر خطا نداریم. اما در بارگذاری اولیه، کشور USA انتخاب شده است و اگر کشور را روی Germany بگذاریم هیچ وقت تغییری نمی کند و در تمام حالت ها سیاه باقی می ماند چرا که دیگر required (الزامی) نیست. این یکی دیگر از قابلیت های بسیار جالب پکیج vuelidate است اما این قابلیت ها به اینجا ختم نمی شوند. ما در قسمت های بعدی به سراغ اعتبارسنجی آرایه ها رفته و حتی در مورد کنترل کردن دکمه submit و تعریف validation های شخصی صحبت خواهیم کرد.