错误

每次修改都会校验错误，但只在合适的时机显示 —— 避免在用户还在输入时就提示错误。

何时显示错误

mode	字段错误何时可见
'blur'（默认）	用户离开字段后（touch）
'input'	值一旦改变，或离开字段后
'submit'	仅在尝试提交之后

第一次尝试提交（handleSubmit 或 validate）之后，无论哪种模式都会显示所有错误。所有当前错误（包括尚未显示的）都在 form.allErrors 中。

const form = useForm(Signup, { initial, mode: 'input' });

服务端错误

如果提交处理函数抛出带有 Laravel 422 响应的错误（axios、ofetch），错误会自动分配到各字段 —— 无需任何操作。用户修改该字段后错误会消失；修改其他字段时错误保留。

对于其他响应格式，请使用 useForm 的 extractErrors 选项或手动调用 setErrors：

// axios / ofetch: 422 is handled automatically
const submit = form.handleSubmit((data) => axios.post('/api/signup', data));

// fetch: no exception on 422 — call setErrors yourself
const submitFetch = form.handleSubmit(async (data) => {
  const res = await fetch('/api/signup', { method: 'POST', body: JSON.stringify(data) });
  if (res.status === 422) {
    const { errors } = await res.json(); // { email: ['The email has already been taken.'] }
    form.setErrors(errors);
    return;
  }
  form.reset();
});

语言和字段名称

使用与 validate 相同的选项为表单设置。完全自定义文本见 自定义语言文件。

import ru from 'tinyval/locales/ru';

const form = useForm(Signup, {
  initial: { name: '', email: '' },
  messages: { ...ru, required: 'Поле «{label}» обязательно' },
  labels: { name: 'Имя', email: 'Почта' },
});

聚焦第一个错误

提交失败时，焦点会自动移到页面中第一个有错误的字段 —— 按 name 属性查找，因此字段需要设置包含路径的 name（name="email"、name="items.0.title"）。useField 会自动设置。可以通过 focusOnError: false 关闭。

如需自定义逻辑，可以使用 onInvalid —— 它会收到可见的错误：

const submit = form.handleSubmit(save, (errors) => {
  toast.error(`Please fix ${Object.keys(errors).length} fields`);
});

另请参阅

• 错误信息与国际化
• useForm