React-hook-form：如何为多个验证函数添加自定义错误提示？

问题说明 #

在React Hook Form里，我们可以直接给required规则指定自定义错误提示：

rules={{
  required: "This field is required",
}}

但当validate是包含多个验证函数的对象时，比如下面这样：

validate: {
  noEmoji: validateNoEmoji,
  noNumbersNoPunctuation: validateOnlyLettersSpacesApostrophes,
},

该如何为每个验证函数分别设置自定义错误消息？比如要给noEmoji添加提示"You can't use emoji"，给noNumbersNoPunctuation添加提示"You cannot use numbers or punctuation."。

以下是当前的Controller组件和验证函数代码：

Controller组件代码 #

<Controller
  control={control}
  name={name}
  rules={{
    required: "This field is required",
    validate: {
      noEmoji: validateNoEmoji,
      noNumbersNoPunctuation: validateOnlyLettersSpacesApostrophes,
    },
  }}
  render={({
    field: { onChange, onBlur, value },
  }) => (
    <IonInput
      label={label}
      name={name}
      value={value}
    />
  )}
/>

原验证函数 #

const validateNoEmoji = (value: string) => !/[힘-�]/.test(value);

const validateOnlyLettersSpacesApostrophes = (value: string): boolean => {
  // 只允许字母、空格和撇号
  if (!/[^a-zA-Z ']/.test(value)) {
    return true;
  }
  return false;
};

解决方案 #

React Hook Form允许验证函数返回布尔值或字符串（错误消息）。当验证不通过时，直接返回自定义错误消息即可，无需返回false。

修改后的验证函数 #

const validateNoEmoji = (value: string) => 
  !/[힘-�]/.test(value) || "You can't use emoji";

const validateOnlyLettersSpacesApostrophes = (value: string) => {
  // 只允许字母、空格和撇号
  if (!/[^a-zA-Z ']/.test(value)) {
    return true;
  }
  return "You cannot use numbers or punctuation.";
};

原理说明 #

当验证函数返回true时，React Hook Form判定验证通过；当返回字符串时，判定验证不通过，并将该字符串作为错误提示信息展示。

修改后，你的Controller组件无需改动，rules中的validate对象可以直接使用修改后的验证函数，框架会自动处理错误消息的展示。

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