## Validation and patterns

The `pattern` and `check` properties are designed for managing input validation in the mask.

**Properties:**

- `pattern` — defines validation patterns for individual mask groups, checking entered values
- `check` — global validation pattern applied after the mask is fully completed

Properties work sequentially: `pattern` validates entered values at the mask group level, highlighting validation errors after input. Characters are entered into the field, but when they don't match the pattern, an error message is displayed. Each group (defined by special characters) receives its own pattern. After the mask is fully filled, `check` performs final validation of the entire value, providing an additional layer of verification for complex business logic. Both properties are optional and can be used independently or together for multi-level protection against incorrect data.

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

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

<template>
  <!-- Pattern for groups: digits only -->
  <Mask
    v-model="phone"
    mask="+7 (***) ***-**-**"
    pattern="\\d"
  />

  <!-- Pattern with function for different groups -->
  <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 for final validation -->
  <Mask
    v-model="cardNumber"
    mask="**** **** **** ****"
    pattern="\\d"
    :check="(maskData) => {
      const number = maskData.value.replace(/\s/g, '')
      return isValidLuhn(number) ? {} : {
        validationMessage: 'Invalid card number'
      }
    }"
  />
</template>
```
