elementui form表单 数组校验 深结构校验

先以官方的demo举例

  
    
  
  
    提交
    重置
  

普通对象属性

其实普通对象属性就是除数组外的数据结构，可以使用数组，对象或是validator函数来进行校验，此时校验的原理是通过prop获取到el-form标签绑定对应的哪一项item，再检验值是否为空（null，''，undefined），如果为空状态则报错，这是最简单理解的第一种情况

data() {
    return {
        pass: [
            { validator: validatePass, trigger: "blur" } // 可以自定义校验规则的方式
          ],
        check: [{ require: true, message: "请填写*****", trigger: "blur"}]  // 简单校验方式
    }
}

数组对象属性

上面提到rules的校验规则是判断值是否为空，那数组是不为空的，因为!![] === true，因此有两种方式可以实现数组的校验

第一种方式

第一种方式适用于数组中每一项有特定的条件进行判断，如数组中某一项值不能重复的场景，可以把rules规则放在数组父级的el-form-item标签中，再在对应的validator里通过value的值做一系列的判断。

 var validatePass = (rule, value, callback) => {
    if (Array.isArray(val) {
        callback(new Error('数据异常'));
    } else {
        value.map(item=>{
              // do sth.
        })
    }
 };

第二种方式

第二种方式适用于把数组项当做一个小的form表单，即无法和数组中的其他项发生联动（实际上是可以的，但是写法很反人类，不推荐这样写），但是校验会轻巧一点。
简单展示一下示例代码，我这里是把他抽象成一个组件了

然后在实际表单中这样使用

最终效果：

深结构校验

如果理解了上面的第二种校验方式，就不难理解深结构校验了。
实际上form表单的校验规则是根据没个el-form-item标签内的prop属性，由字符串转化成对象属性，再找到form表单绑定的v-mode的值进行判断，那么深结构的普通校验可以沿用上面第二种方式，但是绑定的prop就再增加一层关系就可以了。