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

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

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

2. 循环生成的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>

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

自定义校验规则：

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')