element表单校验

普通校验（具体直接看前端框架的官方文档就好了）

formRules: {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ]
},

循环生成的form-item要校验，直接写在iten上面

<Form-item :label="'选项' + (index + 1)" v-for="(item,index) in dataForm.option" :rules="[{ required: true,message:'请输入选项',trigger: 'blur',}]">
  <Input v-model="dataForm.option[index]" placeholder="请输入" class="input-item"></Input>
</Form-item>

自定义校验规则，手动触发某条校验规则

data() {
	 const validElement = (rule, value, callback) => {
    let notEmpty = false
    this.dataForm.element.map((item) => {
      if(item.allow_empty === 0) {
        notEmpty = true
      }
    })
    if(this.dataForm.element.length === 0) {
      callback('请添加表单字段')
    } else if(!notEmpty) {
      callback('请为表单设置至少一个必填项')
    } else {
      callback()
    }
	}
	return {
	  rules: {element: [{ trigger: 'change', validator: validElement }]}
	}
}

有些东西的组件不是单纯的输入框或者单选，而是一些div，无法通过blur或者change触发到，所以需要手动触发某一条：

this.$refs['dataForm'].validateField('element')

如果执行的时候组件还没渲染则会报错，这里需要再包一层nexttick

this.$nextTick(() => {
  this.$refs['dataForm'].validateField('element')
})

参考链接

vue表单 循环生成校验， 自定义校验规则，手动触发某条校验规则