Асинхронные проверки

Схема с checkAsync — например, «email не занят» — работает в useForm без настроек.

Как это работает

• При вводе проверка запускается после паузы debounce (по умолчанию 300 мс) — запрос не уходит на каждую букву.
• Пока проверка идёт, form.validating равен true.
• Ответ устаревшей проверки не перезапишет результат новой: если пользователь успел изменить значение, старый ответ игнорируется.
• Асинхронная проверка поля запускается, только если синхронные правила этого поля прошли — невалидный email не уйдёт на сервер.
• handleSubmit и validate проверяют сразу, без паузы.

Пример

<script setup lang="ts">
const Signup = object({
  email: pipe(
    string(),
    email(),
    checkAsync(async (v) => !(await api.get('/email-exists', { params: { email: v } })).data, 'Email is taken'),
  ),
});

const form = useForm(Signup, { initial: { email: '' }, debounce: 500 });
</script>

<template>
  <input v-model="form.values.email" @blur="form.touch('email')" />
  <span v-if="form.validating">Checking…</span>
  <span v-else-if="form.errors.email">{{ form.errors.email }}</span>
</template>

См. также

• checkAsync
• Ошибки — ошибки, которые вернул сервер при отправке