如何移除Zod的默认错误提示？（Mantine UI组件库场景）

这里提供两种实用方案解决你的问题：

方案1：直接在Zod Schema中覆盖为空提示 #

给每个验证规则传入空字符串作为错误消息，直接替换Zod的默认提示内容：

const schema = z.object({
  name: z.string().min(1, ''),
  email: z.string().min(1, ''),
  lastname: z.string().min(1, '')
})

这样当验证不通过时，Zod返回的错误消息为空，Mantine自然不会显示任何错误提示。

方案2：在Mantine表单组件中控制错误渲染 #

如果不想修改Schema，可以在表单字段的error属性中做判断，为空时不渲染错误提示：

import { useForm } from '@mantine/form';
import { Input, Button } from '@mantine/core';

function ProfileForm() {
  const form = useForm({
    schema,
    initialValues: { name: '', email: '', lastname: '' }
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <Input
        label="Name"
        {...form.getInputProps('name')}
        error={form.errors.name ? form.errors.name : undefined}
      />
      <Input
        label="Email"
        {...form.getInputProps('email')}
        error={form.errors.email ? form.errors.email : undefined}
      />
      <Input
        label="Lastname"
        {...form.getInputProps('lastname')}
        error={form.errors.lastname ? form.errors.lastname : undefined}
      />
      <Button type="submit" mt="md">提交</Button>
    </form>
  );
}

当错误消息为空时，将error设为undefined，Mantine就不会渲染错误提示区域。

内容的提问来源于stack exchange，提问作者Daniel