React中如何在提交时正确校验JSON Forms的数值范围

问题描述 #

我正在开发一个使用JSON Forms的项目，目前遇到校验问题：表单里多个输入值有明确的数值上下限（minimum和maximum字段），现在表单渲染时会显示错误，但仍能提交。我希望数值不符合要求时阻止提交，且不想写冗长函数解析庞大的JSON Schema。示例Schema如下：

{
  "type": "object",
  "required": [
    "sample1",
    "sample2",
    "sample3",
    "sample4"
  ],
  "properties": {
    "sample1": {
      "type": "array",
      "items": {
        "type": "string"
      }
    },
    "sample2": {
      "type": "array",
      "items": {
        "type": "string"
      }
    },
    "sample3": {
      "type": "object",
      "properties": {
        "price": {
          "minimum": 10,
          "maximum": 100
        },
        "price2": {
          "type": "number",
          "minimum": 5,
          "maximum": 1000
        },
        "price3": {
          "type": "number",
          "minimum": 10,
          "maximum": 100
        },
        "price4": {
          "type": "number",
          "minimum": 9,
          "maximum": 12
        },
        "cargo": {
          "type": "object",
          "properties": {
            "values": {
              "type": "number",
              "minimum": 500,
              "maximum": 1000
            },
            "values2": {
              "type": "number",
              "minimum": 5,
              "maximum": 10
            }
          }
        },
        "cars": {
          "type": "object",
          "properties": {
            "prices": {
              "type": "number",
              "minimum": 10000,
              "maximum": 20000
            }
          }
        },
        "trucks": {
          "type": "integer",
          "minimum": 10,
          "maximum": 100
        },
        "fields": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "place": {
                "type": "string"
              },
              "price10": {
                "type": "number",
                "minimum": 0.5,
                "maximum": 1.5
              },
              "sales": {
                "type": "array",
                "items": {
                  "type": "object",
                  "properties": {
                    "discount": {
                      "type": "integer",
                      "minimum": 10,
                      "maximum": 90,
                      "default": 0
                    },
                    "price76": {
                      "type": "number",
                      "minimum": 10,
                      "maximum": 20,
                      "default": 0.1
                    },
                    "price69": {
                      "type": "number",
                      "minimum": 30,
                      "maximum": 40,
                      "default": 0.1
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    "sample4": {
      "type": "object",
      "properties": {
        "price": {
          "minimum": 10,
          "maximum": 100
        },
        "price1": {
          "type": "number",
          "minimum": 0,
          "maximum": 100
        },
        "price2": {
          "type": "number",
          "minimum": 0,
          "maximum": 1
        },
        "price3": {
          "type": "number",
          "minimum": 90,
          "maximum": 100
        },
        "garbage": {
          "type": "object",
          "properties": {
            "price55": {
              "type": "number",
              "minimum": 5,
              "maximum": 10
            },
            "price85": {
              "type": "number",
              "minimum": 5,
              "maximum": 10
            }
          }
        },
        "web": {
          "type": "object",
          "properties": {
            "landing": {
              "type": "number",
              "minimum": 2,
              "maximum": 3
            }
          }
        },
        "observer": {
          "type": "integer",
          "minimum": 80,
          "maximum": 500
        },
        "mountains": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "rock": {
                "type": "string"
              },
              "km": {
                "type": "number",
                "minimum": 500,
                "maximum": 600
              },
              "sales": {
                "type": "array",
                "items": {
                  "type": "object",
                  "properties": {
                    "discount": {
                      "type": "integer",
                      "minimum": 10,
                      "maximum": 90,
                      "default": 0
                    },
                    "price99": {
                      "type": "number",
                      "minimum": 1,
                      "maximum": 2,
                      "default": 0.1
                    },
                    "price100": {
                      "type": "number",
                      "minimum": 5,
                      "maximum": 10,
                      "default": 0.1
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

我曾查阅JSON Forms文档，但仅找到基础校验示例，目前表单渲染时会显示错误，但仍能提交。

解决方案 #

1. 利用内置校验结果拦截提交 #

JSON Forms会自动根据Schema完成所有校验（包括minimum/maximum规则），无需手动解析Schema。你可以直接获取内置的校验状态来拦截提交：

以React环境为例，通过useJsonForms hook获取校验结果，在提交函数中判断是否存在错误：

import { useJsonForms } from '@jsonforms/react';

const handleSubmit = () => {
  const { validation } = useJsonForms();
  // 检查是否存在未修正的校验错误
  if (validation?.errors.length > 0) {
    alert('表单存在错误，请修正后提交');
    return; // 终止提交流程
  }
  // 执行正常的表单提交逻辑
  submitYourFormData();
};

2. UI层面禁用提交按钮（可选） #

如果想从交互上直接限制，可根据校验结果禁用提交按钮，避免用户无效操作：

import { useJsonForms } from '@jsonforms/react';

const YourForm = () => {
  const { validation } = useJsonForms();
  const hasValidationErrors = validation?.errors.length > 0;

  return (
    <>
      <JsonForms 
        schema={yourSchema} 
        uischema={yourUISchema} 
        data={formData} 
        onChange={handleFormChange} 
      />
      <button 
        type="submit" 
        onClick={handleSubmit}
        disabled={hasValidationErrors}
      >
        提交
      </button>
    </>
  );
};

3. 补充说明 #

• JSON Forms的内置校验会自动处理Schema中的所有标准规则，包括嵌套对象、数组内的字段校验，无需额外编写解析逻辑
• validation.errors数组包含所有错误的详细信息，比如错误对应的字段路径、错误提示文本，可按需用于精准提示用户

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