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}"
    },
  ]
},

二、渲染如下


<Form :model="ecsEditForm" ref="ecsEditForm" class="formValidate" label-position="left">
  <p v-for="(item, index) in ecsEditForm.ecsEditData" :key="index">
    <!-- 可以在 rules 对象中进行传参,如我们这里需要的正则 item.regValue -->
    <FormItem :prop="'ecsEditData.' + index + '.value'" :label="item.label" 
      :rules="{required: true,validator: requiredValid, reg: item.regValue, msg: item.attrValueDefault,trigger: 'blur'}">
      <Input v-if="['input'].includes(item.attrFrameType)" v-model="item.value" style="width:120px;" />
    </FormItem>
  </p>
</Form>


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. dataecsEditData 要放在 ecsEditForm中, 并且 <Form> 标签 中 model 的传值 要 相同,也为 ecsEditForm
  2. <Form> 标签 要添加 ref="ecsEditForm"
  3. <FormItem> 中的 prop 如上所示,通过 索引值(:prop="'ecsEditData.' + index + '.value'")来赋值
  4. 行内校验需在 <FormItem> 里的 rules 对象中 添加 validator: requiredValid
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容