iview动态表单校验必填项无效的问题

84 阅读1分钟

使用iview框架的From组件时,如果需要的表单项目为必填项,通常使用在rules中添加required的方式来检验,但如果某一项FormItem的必填项是动态变化的,如果设置了rules规则,又在FormItem上直接添加rules,框架问题,有可能导致效验失效,如:

image.png

可以采用如下的方式解决。

image.png

<FormItem :label="intervalLabel" prop="delayInterval"  v-if="tempFlag" :rules="currentRules">
  <Input type="text" v-model="menuForm.delayInterval" style="width: 50px;"/>
</FormItem>

image.png


intervalRuleDelay: [{ required: true, message: "必填项", trigger: "blur" }],
intervalRule: [{ required: false, message: "", trigger: "blur" }],
computed: {
    currentRules:function(){
        if(this.intervalLabel == '延迟间隔:'){
            return this.intervalRule;
        }else{
            return this.intervalRuleDelay;
        }
    },
},