iview: 多层级复杂数据进行表单动态校验

一、数据如下

ecsEditForm: {
  ecsEditData: [
    {
      label: '实例编码',
      key: 'instanceCode',
      value: '',
      attrFrameType: 'input',
      regValue: "(?=.*[a-z])(?=.*\\d)(?=.*[-_])[a-z\\d-_]{2,50}",
      attrValueDefault: "请输入2-50位，可输入英文+数字和特殊符号“-”“_”"
    },
    {
      label: '资源ID',
      key: 'resourceId',
      value: '',
      attrFrameType: 'input',
      attrValueDefault: "请输入2-50位，可输入英文+数字和特殊符号“-”“_”",
      regValue: "(?=.*[a-z])(?=.*\\d)(?=.*[-_])[a-z\\d-_]{2,50}"
    },
  ]
},

二、渲染如下

  

    
    
      
    
  



methods: {
 requiredValid (rule, value, callback) {
    let length = 0;
    // 对象数组判断
    if (value instanceof Object) {
      length = Object.keys(value).length
    }
    // 字符串的判断
    else if (typeof value === 'string') {
      length = value.trim().length
    }
    // 数字判断
    else {
      length = 1
    }
    // 必填检验
    if (length === 0) {
      callback(new Error(rule.msg))
    }
    let regString = rule.reg;
    if (regString) {
      let reg = new RegExp(regString)
      if (!reg.test(value)) {
        callback(new Error(rule.msg))
      } else {
        callback()
      }
    }
    callback()
  },
}

注意项：

1. data 中 ecsEditData 要放在 ecsEditForm中， 并且
   标签 中 model 的传值 要 相同，也为 ecsEditForm
2. 标签 要添加 ref="ecsEditForm"
3. 中的 prop 如上所示，通过 索引值（:prop="'ecsEditData.' + index + '.value'"）来赋值
4. 行内校验需在 里的 rules 对象中 添加 validator: requiredValid