4. Walidacja propsów dla komponentów vue

Vue natywnie umożliwia walidację propsów, ustawienie wartości domyślnej oraz ustawienie oczekiwanej lub oczekiwanych typów danych. W stytuacji kiedy typ propsa należy do typów referencyjnych jak obiekt czy tablica, można sprawdzić również jego zawartość lub wartośc/typ właściwości węwnątrz tego propsa. Vue daje również możliwośc napisania własnej specjalistycznej walidacji dla stringa czy numbera.

Standardowa walidacja

W najbardziej ogólnej walidacji propsa możemy sprawdzić jego typ, zaznaczyć czy ma być wymagany oraz jego domyślną wartośc:

text: {
      type: String,
      required: true,
      default: 'Lorem ipsum...'
    }

Własna walidacja

Walidacja propsów we vue nie ogranicza się tylko do tego. Mamy możliwośc napisania własnych walidacji i reguł korzystając z metod javascript i własnej inwencji twórczej.

W tej walidacji sprawdzamy czy oczekiwany props pageType ma jeden z trzech dostępnych typów strony. Jeśli posiada inny otrzymamy o tym stosowny warming.

pageType: {
      type: String,
      required: true,
      validator: (value) => {
        return ['page', 'post', 'product'].includes(value)
      }
    }

Mamy duża dowolność w pisaniu własnych validatorów. Możemy oczywiście łączyć różne warunki, np. tutaj chcemy żeby nasz string miał odpowiednia długość i zaczynał się na odpowiednią literę:

foo: {
      type: String,
      required: true,
      validator: (value) => {
        return value.startsWith('A') && value.length > 10
      }
    }

Podobne operacje możemy wykonywać też na liczbach. Poniżej mamy przykład z wykorzystywaniem reużywalnej funkcji oraz z wyrażeniem regularnym do validacji propsa i sprawdzeniem czy spełnia format numeru telefonicznego.

phoneNumber: {
    type: Number,
    required: true,
    validator: prop => phoneNumberValidator(prop);
  }

Oraz sama funkcja phoneNumberValidator do której się odwołujemy:

export function phoneNumberValidator(data) {
 const phoneNumberRegex = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;

 return data.match(phoneNumberRegex);
}
```js

Wyobraźmy sobie, że otrzymujemy obiekt `Person` i w nim jest kilka własności. W tym przykładzie chcemy sprawdzić czy `age` jest liczbą:

```js
person: {
     type: Object,
     required: true,
     validator: obj => {
       return obj.age === 'number'
     }
   }

Jest też możliwość sprawdzenia kilku wartości obiektu:

 person: {
      type: Object,
      required: true,
      validator: obj => {
        const ageIsValid = typeof obj.age === 'number'
        const nameIsValid = typeof obj.name === 'string' && obj.name.length > 3

        return ageIsValid && nameIsValid
      }
    }

Ostatni przykład to validacja tablicy. Możena sprawdzić np. czy każdy element tablicy spełnia dane kryterium:

fooArray: {
      type: Array,
      required: true,
      validator: value => value.every(e => typeof e === 'string')
    }