1. 普通校验(具体直接看前端框架的官方文档就好了)
formRules: {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ]
},
  1. 循环生成的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>
  1. 自定义校验规则,手动触发某条校验规则

自定义校验规则:

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

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐