当所有字段为空时如何设置验证规则 React Hook Form

Question

我正在使用 React Hook Form V7。我有两个输入文件并使用Controller 来控制输入。 下面是我现在做的，每个字段都是必填项。

<form onSubmit={handleSubmit((data) => console.log(data))}>
    <Controller
        render={({ field }) => <TextField value={field.value} onChange={field.onChange} />}
        name="test1"
        control={control}
        rules={{ required: true }}
    />
        <Controller
        render={({ field }) => <TextField value={field.value} onChange={field.onChange} />}
        name="test2"
        control={control}
        rules={{ required: true }}
    />
    <input type="submit" />
</form>

我的问题是如何设置而不是每一个都是必需的，我希望在两个字段都为空时显示错误消息，如果只有一个为空则被接受。

React Hook 表单上是否有任何onSubmit 验证？或者我需要对 onSubmit 函数进行正常验证以检查值，然后设置是否显示错误消息？

编辑： 这就是我现在所做的：

const [submitError, setSubmitError] = useState(false)
onSubmit((data) => {
    const { test1, test2 } = data
    if (!test1 && !test2) {
        setSubmitError(true)
    } else {
        setSubmitError(false)
        // do submit action
    }
})
const errorEmptyMessage = "one of test1 and test2 should has value"
return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
            render={({ field }) => <TextField value={field.value} onChange={field.onChange} />}
            name="test1"
            control={control}
            rules={{ required: true }}
        />
        <Controller
            render={({ field }) => <TextField value={field.value} onChange={field.onChange} />}
            name="test2"
            control={control}
            rules={{ required: true }}
        />
        {submitError && emptyMessage}
        <input type="submit" />
    </form>
)

我想知道React Hook Form 是否有内置函数可以做到这一点？

Answer 1

React Hook Form 上是否有任何 onSubmit 验证？或者我需要做 onSubmit 函数上的正常验证以检查值然后 设置是否显示错误信息？

是的，你有一个很好的解决方案，我推荐它使用嵌套的普通验证，它的名称模式验证如YUP，你需要做的就是添加所需的规则，例如（来自 react-hook-form ):

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";

const schema = yup.object({
  firstName: yup.string().required(),
  age: yup.number().positive().integer().required(),
}).required();

export default function App() {
  const { register, handleSubmit, formState:{ errors } } = useForm({
    resolver: yupResolver(schema)
  });
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <p>{errors.firstName?.message}</p>
        
      <input {...register("age")} />
      <p>{errors.age?.message}</p>
      
      <input type="submit" />
    </form>
  );
}

如果您阅读了上面的代码，您会发现您正在为所需的每个字段构建一个模式，并且您有很多选项，例如在您的情况下，您可以使用何时处理 x 和 y 为空等等...，您还有很多验证模式构建为 int、min 和 required 等对象，您可以查看this part。

您也可以通过 onSubmit 在正常流程中执行此操作，如下所示：

const onSubmit = () => {
  throw new Error('Something is wrong')
}

handleSubmit(onSubmit).catch((e) => {
  // you will need to catch that error
}) 

这里的想法是你检查你需要什么，你可以抛出错误，例如：

  const { register, handleSubmit } = useForm();
  const onSubmit = (data, e) => console.log(data, e);
  const onError = (errors, e) => console.log(errors, e);

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  );

但就我而言，我建议使用模式验证，根据我对 react hook 表单的经验，它真的很有用。

更新 1：更多示例：

以上是如何建立条件来解决问题的示例，只需访问 yup 并检查when，

const schema = 
object().shape({
   a: string().when(["a", "b"], {
      is: (a, b) => !a && !b
      then: string().required("At least one is to be selected"),
      otherwise: string() // unnecessary
   }),
   a: string().when(["a", "b"], {
      is: (a, b) => !a && !b
      then: string().required("At least one is to be selected"),
      otherwise: string() // unnecessary
   })
});