如何在React Hook Form中设置带验证的自定义警告提示？

当然可以设置自定义提示信息，只需修改validate规则的返回值即可：

React Hook Form 的validate函数支持两种返回形式：

• 返回true表示验证通过
• 返回字符串则表示验证失败，该字符串会被自动作为错误消息存储

修改代码中validate部分，当输入不符合要求时返回自定义提示文本：

<FormControl fullWidth sx={{ mb: 6 }}>
  <Controller
    name="username"
    control={control}
    rules={{
      validate: (v) => {
        // 验证通过返回true，失败返回自定义提示
        if (v === "githubid1" || v === "githubid2") {
          return true;
        }
        return "请使用已存在的GitHub ID";
      },
    }}
    render={({ field: { value, onChange } }) => (
      <TextField
        value={value}
        label="用户名"
        onChange={onChange}
        placeholder="johndoe"
        error={Boolean(errors.username)}
      />
    )}
  />
  {errors.username && (
    <FormHelperText sx={{ color: "error.main" }}>
      {errors.username.message}
    </FormHelperText>
  )}
</FormControl>

这样当用户输入的ID不是githubid1或githubid2时，就会显示你设置的自定义提示信息。

内容的提问来源于stack exchange，提问作者János