## Валидация и паттерны

Свойства `pattern` и `check` предназначены для управления валидацией ввода в маске.

**Свойства:**

- `pattern` — определяет паттерны валидации для отдельных групп маски, проверяя введённые значения
- `check` — глобальный паттерн валидации, применяемый после полного заполнения маски

Свойства работают последовательно: `pattern` проверяет введённые значения на уровне групп маски, подсвечивая ошибки валидации после ввода. Символы вводятся в поле, но при несоответствии паттерну отображается сообщение об ошибке. Каждая группа (определённая специальными символами) получает свой паттерн. После полного заполнения маски `check` выполняет финальную валидацию всего значения, обеспечивая дополнительный слой проверки для сложной бизнес-логики. Оба свойства опциональны и могут использоваться независимо или совместно для многоуровневой защиты от некорректных данных.

```html
<script setup>
import { ref } from 'vue'

const phone = ref('')
const cardNumber = ref('')
</script>

<template>
  <!-- Pattern для групп: только цифры -->
  <Mask
    v-model="phone"
    mask="+7 (***) ***-**-**"
    pattern="\\d"
  />

  <!-- Pattern с функцией для разных групп -->
  <Mask
    v-model="phone"
    mask="DD/MM/YYYY"
    :special="{
      'D': {
        pattern: (masks) => {
          const value = masks['D']?.value || ''
          if (value === '0') return '[1-9]'
          if (value === '3') return '[0-1]'
          return '\\d'
        }
      },
      'M': {
        pattern: (masks) => {
          const value = masks['M']?.value || ''
          if (value === '0') return '[1-9]'
          if (value === '1') return '[0-2]'
          return '\\d'
        }
      },
      'Y': { pattern: '\\d' }
    }"
  />

  <!-- Check для финальной валидации -->
  <Mask
    v-model="cardNumber"
    mask="**** **** **** ****"
    pattern="\\d"
    :check="(maskData) => {
      const number = maskData.value.replace(/\s/g, '')
      return isValidLuhn(number) ? {} : {
        validationMessage: 'Неверный номер карты'
      }
    }"
  />
</template>
```
