پروژه Drag & Drop: تعریف متدی جداگانه برای اعتبارسنجی

Drag & Drop Project: Defining a Separate Method for Validation

پروژه ی Drag & Drop: تعریف متدی جداگانه برای اعتبار سنجی

در قسمت قبل یک شرط ساده if را برای اعتبارسنجی خود نوشتیم اما همانطور که در آن جلسه گفتم، هدف ما نوشتن یک تابع جداگانه و حرفه ای برای اعتبارسنجی است. در این جلسه هدف ما تعریف متد خاصی است که داده های ورودی را بر اساس معیار های خاصی اعتبارسنجی می کند. به طور مثال شیء ای به آن پاس بدهیم که ساختاری شبیه به شیء زیر داشته باشد:

{value: enteredTitle, required: true, minLength: 5}

همانطور که می بینید value همان مقداری خواهد بود که مورد سنجش قرار می گیرد و اعضای بعدی شیء نیز مولفه های این اعتبارسنجی هستند، مثلا آیا این فیلد اجباری است یا حداقل تعداد کاراکترهای پذیرفته شده چقدر است و الی آخر. بنابراین در ابتدای فایل یک interface را برای تعریف این ساختار می نویسیم:

// Validation
interface Validatable {
    value: string | number;
    required: boolean;
    minLength: number;
    maxLength: number;
    min: number;
    max: number;
}

این interface ساختار اعتبارسنجی من را تعریف کرده است. تفاوت بین minLength و maxLength با min و Max این است که دو مورد اول تعداد کاراکترهای رشته را می سنجند و دو مورد دوم مقدار عدد را می سنجد که بین دو عدد حداکثر و حداقل باشد. البته باید تمام این خصوصیت ها به غیر از Value را اختیاری کنیم تا تمام این موارد برای تک تک فیلدهای ما اجباری نباشند (مثلا مقدار حداقل یا حداکثر عددی برای رشته title معنی نمی دهد) بنابراین:

// Validation
interface Validatable {
    value: string | number;
    required?: boolean;
    minLength?: number;
    maxLength?: number;
    min?: number;
    max?: number;
}

همانطور که می دانید علامت سوال اختیاری بودن را مشخص می کند. در اصل علامت سوال حالت اختصاری کد زیر است:

    required: boolean | undefined;

حالا باید متدی را تعریف کنیم (در همان ابتدای فایل و خارج از کلاس) که کار اعتبارسنجی را انجام دهد:

function validate(validatableInput: Validatable) {
    
}

همانطور که می بینید این متد یک شیء را دریافت خواهد کرد که بر اساس interface تعریف شده ما می باشد. منطق اعتبارسنجی ما این است که متغیری به نام isValid خواهیم داشت. پیش فرض ما این خواهد بود که این متغیر همیشه true می باشد و چندین شرط if جداگانه خواهیم داشت بنابراین هرگاه به خطایی در اعتبارسنجی برخوردیم (یکی از مولفه ها معتبر نبود) آن را به false تغییر می دهیم. مورد اول required یا خالی نبودن فیلد است:

function validate(validatableInput: Validatable) {
  let isValid = true;
  if (validatableInput.required) {
    isValid = isValid && validatableInput.value.toString().trim().length !== 0;
  }
// بقیه کد ها //

اگر required درون validatableInput وجود داشته باشد یعنی اجباری است و ما آن را تعریف کرده ایم. مشکل اینجاست که value در interface ما از نوع رشته یا عدد (string | number) بود بنابراین برای اینکه مطمئن شویم آن را با toString به یک رشته تبدیل کرده ایم. مقدار required برای این است که مطمئن شویم کاربر فیلد را خالی نگذاشته باشد بنابراین در این قسمت هیچ تفاوتی ندارد که داده کاربر رشته یا عدد باشد. به همین دلیل است که می توانیم به راحتی از toString استفاده کنیم و دیگر نیازی به نوشتن یک شرط if دیگر برای تشخیص عدد و رشته بودن آن نمی باشد.

مورد بعدی minLength است:

  if (
    validatableInput.minLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length >= validatableInput.minLength;
  }

شرط بعدی ما که در کد بالا مشخص است می گوید اگر minLength برابر null نباشد و همچنین value از نوع رشته باشد (توجه کنید که minLength تعداد کاراکترهای رشته را حساب می کرد بنابراین برای اعداد بی معنی است) مقدار isValid زمانی برابر true است که طول value از طول تعریف شده در minLength بیشتر باشد. همین کار را با maxLength نیز انجام می دهیم:

  if (
    validatableInput.maxLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length <= validatableInput.maxLength;
  }

شرط های باقی مانده نیز min و max هستند که مانند دو شرط بالا بوده اما فقط برای اعداد می باشند. بنابراین کل متد اعتبارسنجی من به شکل زیر خواهد بود:

function validate(validatableInput: Validatable) {
  let isValid = true;
  if (validatableInput.required) {
    isValid = isValid && validatableInput.value.toString().trim().length !== 0;
  }
  if (
    validatableInput.minLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length >= validatableInput.minLength;
  }
  if (
    validatableInput.maxLength != null &&
    typeof validatableInput.value === 'string'
  ) {
    isValid =
      isValid && validatableInput.value.length <= validatableInput.maxLength;
  }
  if (
    validatableInput.min != null &&
    typeof validatableInput.value === 'number'
  ) {
    isValid = isValid && validatableInput.value >= validatableInput.min;
  }
  if (
    validatableInput.max != null &&
    typeof validatableInput.value === 'number'
  ) {
    isValid = isValid && validatableInput.value <= validatableInput.max;
  }
  return isValid;
}

فکر می کنم منطق نوشته شده برای max و min هم ساده باشد و نیازی به توضیح اضافه ندارد. به طور خلاصه چک کرده ایم که max و min تعریف نشده نباشند (برابر null نباشند) و حتما typeof آن ها برابر number باشد. در نهایت ورودی کاربر باید از max کمتر و از min بیشتر باشد. حالا متد اعتبارسنجی ما کامل شده است و برای استفاده از آن باید به کلاس ProjectInput برویم. در این کلاس متدی به نام gatherUserInput داشتیم. ما باید درون این متد اشیاء مورد نظر خود را برای هر سه فیلد تعریف کنیم تا اعتبارسنجی شود بنابراین:

  private gatherUserInput(): [string, string, number] | void {
    const enteredTitle = this.titleInputElement.value;
    const enteredDescription = this.descriptionInputElement.value;
    const enteredPeople = this.peopleInputElement.value;

    const titleValidatable: Validatable = {
      value: enteredTitle,
      required: true
    };
    const descriptionValidatable: Validatable = {
      value: enteredDescription,
      required: true,
      minLength: 5
    };
    const peopleValidatable: Validatable = {
      value: +enteredPeople,
      required: true,
      min: 1,
      max: 5
    };

    if (
      !validate(titleValidatable) ||
      !validate(descriptionValidatable) ||
      !validate(peopleValidatable)
    ) {
      alert('Invalid input, please try again!');
      return;
    } else {
      return [enteredTitle, enteredDescription, +enteredPeople];
    }
  }

من سه شیء مورد نظر خودم را در کد بالا تعریف کرده ام و مولفه های اعتبارسنجی را برایش نوشته ام. به طور مثال برای peopleValidatable گفته ام که باید required بوده و عدد آن نیز بین 1 تا 5 باشد. پس از تعریف این سه شیء، درون شرط if از متد validate استفاده می کنیم و اشیاء را به آن پاس می دهیم. اگر مقادیر معتبر باشند متد validate مقدار true را برگردانده و در غیر این صورت False را برمی گرداند. بنابراین یک علامت ! را نیز قبل از Validate قرار می دهیم تا بگوییم اگر مقادیر ما نامعتبر بود وارد شرط شویم.

حالا می توانید کد ها را درون مرورگر تست کنید. برنامه باید بدون اشکال برایتان اجرا شود.

دانلود سورس کد این جلسه