VueJS中能否复用Vuelidate校验规则于模板v-if条件？

完全没问题，而且非常推荐这么做——把重复的判断逻辑抽离出来，让表单校验规则和模板的v-if共用同一套逻辑，既能保证一致性，以后改规则也只需要动一处地方。

具体实现步骤： #

1. 提取共享逻辑到组件计算属性
   把你在校验规则和v-if里用到的判断逻辑，封装成组件内的计算属性（纯逻辑判断场景下，计算属性比方法更合适）：

   computed: {
     shouldValidateMyField() {
       // 核心判断逻辑只写一次
       return this.someProperty && this.anotherProperty !== "COUNTRY";
     }
   }
   

2. 在Vuelidate校验规则中复用逻辑
   修改你的validations函数，直接调用这个计算属性：

   validations() {
     return {
       myValidationRule: {
         required: requiredIf(() => this.shouldValidateMyField)
       }
     }
   }
   

3. 在PUG模板的v-if中复用
   你原来的v-if条件someProperty === false || anotherProperty === 'COUNTRY'，正好是shouldValidateMyField的取反，直接写成：

   template(v-if="!shouldValidateMyField")
   

为什么这么做更好？ #

• 避免重复代码：不用在两个地方写几乎一样的条件判断，减少冗余
• 逻辑一致性：不用担心校验规则和模板显示条件出现不一致的情况
• 易于维护：以后如果需要调整判断逻辑，只需要修改shouldValidateMyField这一处即可

内容的提问来源于stack exchange，提问作者Robert Strauch