reactjs - 使用 react Hook 形式验证字段数组

Question

我想为输入字段添加验证。我正在使用 react Hook 形式。验证应类似于字段的总和应为 100。如果任何字段的总和大于或小于 100，则应在输入字段(最后编辑的字段)中显示错误。

沙盒网址: https://codesandbox.io/s/distracted-elion-z2wob?file=/src/App.js

谢谢🙏

Answer 1

react-hook-form v7.34.0 中有一个最近的新功能提供这种开箱即用的验证...

在定义字段数组时设置

在您的情况下，您可以在自定义验证函数中运行字段总和 == 100 的检查

useFieldArray({
  name: 'test',
  rules: {
    validate: (fieldArrayValues) => {
      // check that sum of all fields == 100
    },
  }
})

然后你检查/使用这样的错误

errors?.test?.root?.message

详情请看这里...

https://react-hook-form.com/api/usefieldarray/

https://github.com/react-hook-form/react-hook-form/issues/6879

https://github.com/react-hook-form/react-hook-form/pull/8562