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

Question

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.

产生错误

实际结果 没有产生错误。

Answer 1

指定目标的格式是 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>