如何在JHipster 7.1.0 ReactJS表单中实现跨字段校验

JHipster 7.x 封装的 ValidatedForm 和 ValidatedField 底层基于 react-hook-form v7，自定义校验函数支持接收第二个参数获取全表单的所有字段值，配合 deps 属性声明依赖的字段即可实现跨字段校验逻辑，具体修改如下： #

修改步骤 #

1. 移除 specialDietNumber 字段原有固定值的 max 校验规则
2. 改写 specialDietNumber 字段的自定义 validate 逻辑，新增和 personNumber 字段的取值比较判断
3. 给 specialDietNumber 对应的 ValidatedField 组件添加 deps="personNumber" 属性，保证当 personNumber 取值修改时，会自动触发 specialDietNumber 的重新校验

修改后完整代码 #

<ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}>
  <ValidatedField
    label="Person Number"
    id="reservation-personNumber"
    name="personNumber"
    data-cy="personNumber"
    type="number"
    validate={{
      required: { value: true, message: 'This field is required.' },
      min: { value: 1 },
      max: { value: 1000, message: 'This field cannot be more than 1000.'},
      validate: v => isNumber(v) || 'This field should be a number.',
    }}/>
  <ValidatedField
    label="Special Diet Number"
    id="reservation-specialDietNumber"
    name="specialDietNumber"
    data-cy="specialDietNumber"
    type="number"
    deps="personNumber"
    validate={{
      required: { value: true, message: 'This field is required.' },
      min: { value: 1, message: 'This field should be at least 1.' },
      validate: (v, formValues) => {
        if (!isNumber(v)) return 'This field should be a number.'
        const personCount = Number(formValues.personNumber)
        const dietCount = Number(v)
        return dietCount <= personCount || `This field cannot be more than ${personCount}.`
      },
    }}/> 
</ValidatedForm>

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