我在文档里看到了
<input
{...register("test1", {
validate: {
positive: v => parseInt(v) > 0,
lessThanTen: v => parseInt(v) < 10,
checkUrl: async () => await fetch(),
}
})}
/>那么在这里,我如何为每个验证显示不同的消息。
比如数字是-5,然后我显示
"Number is not positive"
"Number less than 10"用于访问每个错误positive和lessThanTen的HOw
发布于 2021-11-10 17:22:09
根据默认的RHF,每个字段只会显示一个错误,所以如果有多个错误,你就不必遍历它们了。您可以只使用RHF提供的errors对象并访问字段的name,然后访问message属性。
如果您需要同时显示所有错误,您可以设置配置criteriaMode,查看文档here以获取更多信息。
function App() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="test1">Test Field</label>
<input
{...register("test1", {
validate: {
positive: (v) => parseInt(v) > 0 || "Number is not positive",
lessThanTen: (v) => parseInt(v) < 10 || "Number less than 10",
checkUrl: async () => {
const result = await Promise.resolve(true);
return result || "result was false so show this message";
}
}
})}
/>
{errors.test1 && <p>{errors.test1.message}</p>}
<input type="submit" />
</form>
);
}
发布于 2021-11-10 14:49:20
要应用多个验证,您可以构建一个自定义挂钩作为解析器。自定义钩子可以很容易地与yup/Joi/Superstruct集成作为验证方法,并在验证解析器中使用。
您可以在此处找到更多文档和示例:https://react-hook-form.com/advanced-usage/中的部分:带解析器的自定义钩子
我推荐你yup。
https://stackoverflow.com/questions/69915176
复制相似问题