普通校验（具体直接看前端框架的官方文档就好了）
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')
})