Реализация движка валидации форм с поддержкой правил, схем и сообщений об ошибках — аналог ядра VeeValidate

// ============================================
// Движок валидации форм
// (упрощённая модель VeeValidate)
// ============================================

// Встроенные правила валидации
const rules = {
  required: (value) => {
    if (value === null || value === undefined || value === '') {
      return 'Это поле обязательно'
    }
    return true
  },

  email: (value) => {
    if (!value) return true  // required обрабатывает пустоту
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return re.test(value) ? true : 'Некорректный email'
  },

  min: (value, [minLength]) => {
    if (!value) return true
    return String(value).length >= Number(minLength)
      ? true
      : `Минимум ${minLength} символов`
  },

  max: (value, [maxLength]) => {
    if (!value) return true
    return String(value).length <= Number(maxLength)
      ? true
      : `Максимум ${maxLength} символов`
  },

  matches: (value, [pattern, message]) => {
    if (!value) return true
    const re = new RegExp(pattern)
    return re.test(value) ? true : (message || 'Некорректный формат')
  },

  minValue: (value, [min]) => {
    if (value === '' || value === null) return true
    return Number(value) >= Number(min)
      ? true
      : `Минимальное значение: ${min}`
  },
}

// ============================================
// Валидация одного поля
// ============================================

function validateField(value, fieldRules) {
  if (!fieldRules) return null

  // fieldRules может быть функцией или массивом правил
  if (typeof fieldRules === 'function') {
    const result = fieldRules(value)
    return result === true ? null : result
  }

  // Обрабатываем массив правил: ['required', 'email', ['min', 8]]
  for (const rule of fieldRules) {
    let ruleName, params
    if (Array.isArray(rule)) {
      [ruleName, ...params] = rule
    } else {
      ruleName = rule
      params = []
    }

    const validator = rules[ruleName]
    if (!validator) {
      console.warn(`Правило не найдено: "${ruleName}"`)
      continue
    }

    const result = validator(value, params)
    if (result !== true) return result  // первая ошибка
  }

  return null  // валидация прошла
}

// ============================================
// Класс формы (аналог useForm)
// ============================================

class Form {
  constructor(schema) {
    this.schema = schema
    this.values = {}
    this.errors = {}
    this.touched = {}

    // Инициализируем значения по умолчанию
    for (const field of Object.keys(schema)) {
      this.values[field] = ''
      this.errors[field] = null
      this.touched[field] = false
    }
  }

  setValue(field, value) {
    this.values[field] = value
    this.touched[field] = true
    // Валидируем поле при изменении
    this.errors[field] = validateField(value, this.schema[field])
  }

  validateAll() {
    let isValid = true
    for (const [field, rules] of Object.entries(this.schema)) {
      this.errors[field] = validateField(this.values[field], rules)
      this.touched[field] = true
      if (this.errors[field]) isValid = false
    }
    return isValid
  }

  submit(onSuccess) {
    const isValid = this.validateAll()
    if (isValid) {
      onSuccess({ ...this.values })
    } else {
      console.log('  Форма содержит ошибки, отправка отменена')
    }
    return isValid
  }

  reset() {
    for (const field of Object.keys(this.schema)) {
      this.values[field] = ''
      this.errors[field] = null
      this.touched[field] = false
    }
  }

  get isValid() {
    return Object.values(this.errors).every(e => e === null)
  }
}

// ============================================
// Демонстрация
// ============================================

console.log('=== Форма регистрации ===')

const form = new Form({
  name: ['required', ['min', 2], ['max', 50]],
  email: ['required', 'email'],
  password: [
    'required',
    ['min', 8],
    ['matches', '[A-Z]', 'Нужна хотя бы одна заглавная буква'],
  ],
  age: ['required', ['minValue', 18]],
})

// Симуляция пользовательского ввода
console.log('\nПользователь вводит данные:')

form.setValue('name', 'A')  // слишком короткое
console.log('name error:', form.errors.name)

form.setValue('name', 'Alice')
console.log('name error:', form.errors.name)  // null

form.setValue('email', 'не-email')
console.log('email error:', form.errors.email)

form.setValue('email', 'alice@example.com')
console.log('email error:', form.errors.email)  // null

form.setValue('password', 'weak')
console.log('password error:', form.errors.password)

form.setValue('password', 'StrongPass1')
console.log('password error:', form.errors.password)  // null

form.setValue('age', '15')
console.log('age error:', form.errors.age)

form.setValue('age', '25')
console.log('age error:', form.errors.age)  // null

console.log('\nОтправка формы:')
form.submit((values) => {
  console.log('Форма отправлена!', values)
})

console.log('\nПопытка отправить с ошибкой:')
form.setValue('email', 'bad-email')
form.submit((values) => {
  console.log('Это не должно вывестись')
})
console.log('Ошибки:', form.errors)