我使用的是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 Form上是否有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是否有一个内置的功能来做到这一点？
React Hook Form上是否有onSubmit验证？或者我需要做对onSubmit函数进行正常验证以检查值，然后设置是否显示错误消息？
是的，你有一个很好的解决方案，我建议它使用嵌套的正常验证，它的名称模式验证像YUP，你只需要添加所需的规则，例如(从react hook表单(：
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等对象，你可以检查这一部分。
你也可以通过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
})
});