iView UI FORM 动态添加表单项校验规则写法实例

<template>
 <Form model="questionFormData" :rules="questionRules" refs="questionFormRefs">
    <FormItem prop="question" lable="问题描述">
      <Input v-model="questionFormData.question"></Input>
    </FormItem>
  </Form>
</template>
<script>
  export default {
    data() {
      return {
        questionFormData: {
          question: ''
        },
        questionRules: {
          question: [{
            { required: true, message: "不允许为空", trigger: "blur" },
          }]
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs[name].validate(async valid => {
          // valid true验证通过，false 验证不通过
      	});
      }
    }
  }
</script>

:prop="'items.' + index + '.value'"
:rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}"

<template>
<Form model="questionFormData" :rules="questionRules" refs="questionFormRefs">
    <FormItem 
        v-for="(item, index) of questionFormData.questions"
        :prop="'questions.' + index +'.question'"
        :rules="{required: true, message: '问题' + (index + 1) + '不允许为空', trigger: 'blur'}"
        :lable="'问题' + (index + 1) +'描述"
    >
    <Input v-model="questionFormData.question[index]"></Input>
  </FormItem>
</Form>
</template>
<script>
	export default {
    data() {
      return {
        questionFormData: {
          questions: [{
            id: 1,
            question: '问题1'
          }, {
            id: 2,
            question: '问题2'
          }],
        },
        questionRules: {
        }
      }
    }
  }
</script>

computed: {
  fieldValue () {
    // FormInstance 是当前Form的实例，获取到model，也就是questionFormData
    const model = this.FormInstance.model;
    if (!model || !this.prop) { return; }
		// 此处的prop 就是 questions.0.question
    let path = this.prop;
    // 如果遇到:就替换为点，如questions:0.question -> questions.0.question
    if (path.indexOf(':') !== -1) {
      path = path.replace(/:/, '.');
    }
    // 获取到questions.0.question在questionFormData的值
    return getPropByPath(model, path).v;
  },
},
function getPropByPath(obj, path) {
  // tempObj = questionFormData
  let tempObj = obj;
  // 将中括号替换为. 如 questions[0][question] -> questions.0.question
  path = path.replace(/\[(\w+)\]/g, '.$1'); 
  // 替换首个.， .questions.0.question -> questions.0.question 最终处理成这个格式
  path = path.replace(/^\./, '');
  // 分割成数组 得到 ['questions','0','question']
  let keyArr = path.split('.');
  let i = 0;
	// 以 i = 0来查此处代码作用
  for (let len = keyArr.length; i < len - 1; ++i) {
    // key = questions
    let key = keyArr[i];
    // questions 在 questionFormData中，进入为true的代码块
    if (key in tempObj) {
      // tempObj = questions
      tempObj = tempObj[key];
    } else {
      throw new Error('[iView warn]: please transfer a valid prop path to form item!');
    }
  }
  return {
    o: tempObj, // { id: 1, question: '问题1' }
    k: keyArr[i], // question
    v: tempObj[keyArr[i]] // 问题1
  };
 }