在React.js与JavaScript中验证指定规则的JSON数组

针对你提出的三个验证要求，这里给出一套简洁的原生JavaScript实现方案，React项目中可直接复用：

验证逻辑拆解与代码实现 #

1. 定义可维护的验证规则常量 #

先把固定规则抽成常量，方便后续修改维护：

// 允许的对象字段列表
const ALLOWED_FIELDS = ['name', 'school', 'address'];
// school字段的合法取值
const ALLOWED_SCHOOLS = ['school1', 'school2'];
// address字段的合法取值
const ALLOWED_ADDRESSES = ['newyork', 'washington'];

2. 核心验证函数 #

function validateData(data) {
  // 验证点1：检查是否为数组类型
  if (!Array.isArray(data)) {
    return {
      valid: false,
      message: '数据必须是数组类型'
    };
  }

  // 遍历数组逐个验证元素
  for (let index = 0; index < data.length; index++) {
    const item = data[index];
    // 先确保当前元素是有效对象
    if (typeof item !== 'object' || item === null) {
      return {
        valid: false,
        message: `第${index+1}项不是有效对象`
      };
    }

    // 验证点2：检查字段数量与字段名是否合规
    const itemFields = Object.keys(item);
    if (itemFields.length !== ALLOWED_FIELDS.length) {
      return {
        valid: false,
        message: `第${index+1}项字段数量不符合要求`
      };
    }
    // 检查是否存在非法字段
    const hasInvalidField = itemFields.some(field => !ALLOWED_FIELDS.includes(field));
    if (hasInvalidField) {
      return {
        valid: false,
        message: `第${index+1}项包含非法字段`
      };
    }

    // 验证点3：检查school和address的取值合法性
    if (!ALLOWED_SCHOOLS.includes(item.school)) {
      return {
        valid: false,
        message: `第${index+1}项的school取值非法，仅支持school1或school2`
      };
    }
    if (!ALLOWED_ADDRESSES.includes(item.address)) {
      return {
        valid: false,
        message: `第${index+1}项的address取值非法，仅支持newyork或washington`
      };
    }
  }

  // 所有验证通过
  return {
    valid: true,
    message: '数据验证通过'
  };
}

3. React组件中使用示例 #

在React组件里，可在获取数据后直接调用验证函数，示例如下：

import { useEffect, useState } from 'react';

function DataValidator() {
  const [validationResult, setValidationResult] = useState(null);
  // 测试用数据
  const testData = [
    {
      "name":"john",
      "school":"school 2",
      "address":"newyork"
    },
    {
      "name":"peter",
      "school":"school 1",
      "address":"washington"
    }
  ];

  useEffect(() => {
    const result = validateData(testData);
    setValidationResult(result);
  }, []);

  return (
    <div>
      <h3>数据验证结果</h3>
      {validationResult && (
        <p style={{ color: validationResult.valid ? 'green' : 'red' }}>
          {validationResult.message}
        </p>
      )}
    </div>
  );
}

export default DataValidator;

补充说明 #

• 验证函数会在第一个不通过的节点直接返回结果，避免无效遍历
• 规则全部抽离为常量，后续修改允许字段或取值时，只需调整常量即可
• 如果需要扩展验证规则（比如name不能为空），可直接在函数中添加对应判断逻辑

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