Vuelidate requiredIf 不使用复选框

Posted 2023-02-22

【中文标题】Vuelidate requiredIf 不使用复选框

【英文标题】：Vuelidate requiredIf is not working with checkbox

【发布时间】：2020-03-21 03:44:33

【问题描述】：

如果启用了功能（如果您选择复选框），我正在尝试填写必填字段。 但是该验证不会通过单击选择/取消选择复选框来触发

 <b-form-checkbox v-model="form.banner.enabled">
     <span class="label-title control-label">Enable</span>
 </b-form-checkbox>

Vue js

validations: 
    form: 
        banner:
            image:
                required: requiredIf(function() 
                    console.log("Image validator called")
                    return this.form.banner.enabled;
                )
            
        
    ,
  ,

我取消选中复选框，静止图像字段给出Its required 的错误

<b-form-input id="bannerImage" name="bannerImage" v-model="form.banner.image" :state="$v.form.banner.image.$dirty ? !$v.form.banner.image.$error : null"></b-form-input>
<b-form-invalid-feedback >
     <span >The image field is required.</span>
</b-form-invalid-feedback>

您可以复制 - 删除 image 的值并取消选中 enabled 选项并单击保存。它将给出错误The image field is required.，因为验证器没有调用提交。提交代码是

this.$v.form.$touch()
if (this.$v.form.$anyError) 
     return; //return if any error

//execute save form code if no error

参考图片

【参考方案1】：

我将添加到 Brose 响应中，即我不会在 data 中使用如此深层次的对象，即使它应该像我们预期的那样工作。

将validations 作为一个函数我认为没有必要。您可以将其保留为对象，仅尝试将所需的设置为函数。正如您所看到的here，其他人发现requiredIf 也无法像我们预期的那样工作。我试图做和你一样的事情：使用 requiredIf 检查一个值并根据需要设置属性。在不使用requiredIf 并将函数分配给required 之后，我开始检查组件内部的属性$v，我相信我理解它的行为方式。

最初我认为以下代码就足够了：

validations: 
    form: 
        banner:
            image:
                required: function() 
                    return this.form.banner.enabled;
                ,
            ,
        ,
    ,

我错了！这不像我预期的那样工作，因为$v.form.banner.image 中的属性required 是一个布尔值，它反映是否满足输入条件并且我的函数不完整。所以它不能只检查它是否应该被要求，它必须检查是否满足要求的条件，即以下代码，假设这个data结构：

data() 
  return 
    form: 
      banner: 
        enabled: true,
        image: '',
      
    
  
,
validations: 
    form: 
        banner:
            image:
                required: function() 
                    return this.form.banner.enabled ? !!this.form.banner.image : true;
                ,
            ,
        ,
    ,

这将检查内容是否需要以及是否存在，如果不需要则返回true，因为满足要求。

经过一番挣扎后，我没有使用 requiredIf 就得出了这个结论，因为我需要更自定义的验证。

【讨论】：

很好的答案！谢谢。

【参考方案2】：

尝试将验证转换为函数

validations() 
    const validations = 
       form: 
         banner:
           image:
         
       
    ;

    if (this.enabled) 
      validations.form.banner.image = 
        required
      ;
    

    return validations;
  

使用您指定的触发器更改“this.enabled”

【讨论】：

它没有用。一样。甚至添加了其他部分。但没有运气

【参考方案3】：

您的数据对象中的表单是什么样的？

根据您的 v-model form.banner.image，您将深入几个级别（除非您使用的是 cloneDeep 之类的东西，否则 vue 不喜欢这个）。此外，最好将复选框输入绑定到您可以在状态中跟踪的内容。

类似：

data() 
    return 
      imageEnabled: false,
    ;
  

然后尝试上面的代码并将“this.enabled”替换为“this.imageEnabled”，并将其 v-modeled 到输入复选框

【讨论】：

我的数据对象 - return form: banner: enabled:true, image:null, , ,

当我使用 并且需要验证时它工作：requiredIf (function() return this.$v.form.banner.enabled == "enabled"; ) 当复选框没有布尔值但没有布尔值时，多级如何工作

根据您向我展示的内容，我们唯一真正要从我的代码中改变的是： if (this.form.banner.enabled) validations.form.banner.image = required ;基本上我们是在告诉 vuelidate 仅在 enabled 为 true 时才需要此元素。如果您正在使用 chrome，我强烈建议您下载 vue devtools（如果您还没有的话），并检查您的状态以确保启用正确触发并且您的数据看起来应该如此。祝你好运！