复杂数据表单校验

复杂数据表单校验

1、数据结构情况

大概有三层数组，第一层是teachContent，第二层是content，第三层是requirements，每一层数组都由跟多对象组成，为了方便看，我就只放了一个对象。

  teachContent.value = [
    {
      title: '实验1',
      origin: 1,
      id: '1',
      experimentalType: '10',
      Equipment: '很多设备',
      content: [
        {
          id: '100',
          experimentContent: '操作系统的目标、作用、定义和发展',
          plannedHours: 2,
          select: '10',
          requirements: [
            {
              r_id: '1',
              origin: 1,
              teachingRequirement:
                '理解操作系统的目标、作用和定义； 因； 比较分时系统和实时系统的区别',
              supportTeachingObjectives: '',
            },
          ],
        },
      ],
    },
  ];

2、页面

左面树，右面form，点击左侧树，右侧数据会改变；
右侧form填写好后，保存需要对整个数据进行校验。
数据的层数我大概标了一下

3、校验内容

为了校验表单，不要怀疑，整个数据除了id和用于排序的origin属性，都要校验！！！
不过还好，只需要校验他的数据存不存在。

4、校验代码

主体思想：进入数组先把每个数据的属性校验一遍，然后找到数组的属性，再进入checkForm函数。
出口1：全部校验完毕，没有错误，return true。
出口2：发现某个属性有问题，返回错误和false 并跳出函数。
point是为了记录第二层和第一层数据的title，如果第三层数据没写，报的错误是它所属的第二次的名字。

// arr数据 dept向下循环的层数 point报存错的模块
export function checkForm(arr, dept, point) {
  // 循环数组arr 校验对象 再次发现数组 向下循环
  for (let i = 0; i < arr.length; i++) {
    // 记录对象中是否有数组 ikey标志数组键名
    let ikey = '';
    // 用来记录是否有属性没有值
    let flag = false;
    // 循环当前对象 arr[i]
    Object.keys(arr[i]).forEach((key) => {
      // 有报错的属性就跳过
      if (flag) return;
      if (Array.isArray(arr[i][key])) {
        // 数组属性 记录一下这个属性
        ikey = key;
      } else {
        // 普通属性检查属性是否有值
        if (!arr[i][key]) {
          //  没有值 flag记录
          flag = true;
          let warnConten = '';
          if (point === undefined) {
            // 证明是第一层和第二层有问题 此时point没有赋值
            warnConten = arr[i].title;
          } else {
            // 证明是第三层有问题 此时point的值是实验内容的值
            warnConten = point.title;
          }
          if (warnConten === undefined) {
            ElMessage({
              showClose: true,
              message: `请查看是否未填写完整的模块`,
              type: 'warning',
              dangerouslyUseHTMLString: true,
            });
            return;
          }
          ElMessage({
            showClose: true,
            message: `请查看 <i style='color:red'>${warnConten}</i> 模块是否未填写完整`,
            type: 'warning',
            dangerouslyUseHTMLString: true,
          });
        }
      }
    });
    // 有属性报错 返回false 跳出当前checkForm
    if (flag) return false;
    // 其他属性没有错误 对象里有个数组
    if (ikey) {
      let p = point;
      // 到第二层 及实验内容时 传一个point 用于第三层即教学要求报错时错误提示
      if (dept === 1) {
        p = arr[i];
      }
      // 进入下层数组
      if (!checkForm(arr[i][ikey], dept + 1, p)) {
        // 有错误不用向下走循环了 跳出当前checkForm
        return false;
      }
    }
  }
  // 循环正常 没有错误返回true
  return true;
}