自定义规则的无限目标不起作用

问题描述

js

veevalidate.Validator.extend('requireWithoutAll',{
    validate: (value,[ ...target ]) => {
    return value && _.compact(target).length;
  },getMessage: (field,[...target]) => 'The ${field} is required when none of ${target} are present.'
},{
    hasTarget: true
});

vue

                        <ValidationProvider name="name1" vid="ref1">
                            <el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 1">                                
                                <el-checkBox v-model="is_model_1">Yes</el-checkBox>
                            </el-form-item>    
                        </ValidationProvider>    
                        <ValidationProvider name="name2" vid="ref2">    
                            <el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 2">                                
                                <el-checkBox v-model="is_model_2">Yes</el-checkBox>
                            </el-form-item>    
                        </ValidationProvider>    
                        <ValidationProvider :rules="'requireWithoutAll:ref1,ref2'" name="name3" vid="ref3">    
                            <el-form-item slot-scope="{ errors }" :error="errors[0]" label="Lorum Ipsum 3">                                
                                    <el-checkBox v-model="is_model_3">Yes</el-checkBox>
                            </el-form-item>    
                        </ValidationProvider>

预期结果 如果未选择ref1和ref2，则会在ref3上生成错误。

实际结果 错误不会产生。

解决方法

用于指定目标的格式为rules="requireWithoutAll:@ref1,@ref2"，而不是rules="requireWithoutAll:ref1,ref2"。

在此处查看有效的示例：https://codesandbox.io/s/codesandbox-forked-u0s3g?file=/src/Demo.vue

相关代码：

  <ValidationProvider
    rules="requireWithoutAll:@ref1,@ref2"
    vid="ref3"
    v-slot="{ errors }"
    tag="div"
  >
     <!-- your checkbox UI here -->
  </ValidationProvider>