异步检查
包含 checkAsync 的 Schema(例如“邮箱未被占用”)无需额外配置即可用于 useForm。
工作方式
- 输入时,检查会在
debounce延迟(默认 300 毫秒)后执行 —— 不会每输入一个字符就发送请求。 - 检查期间
form.validating为true。 - 过期的响应不会覆盖较新的结果:如果用户在此期间修改了值,旧的响应会被忽略。
- 只有字段的同步规则通过后才会执行异步检查 —— 无效的邮箱不会被发送到服务端。
handleSubmit和validate会立即检查,没有延迟。
示例
vue
<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
- 错误:提交时服务端返回的错误