VeeValidate 自定义验证的奇怪结果

Question

我正在验证表单中的开始和结束时间字段。
输入看起来像（是的，我有很多参数可以进行服务器端验证）：

<ValidationObserver>
                       <div class="w3-third">
                           <label>From</label>
                           <ValidationProvider vid='st'   mode="eager"  :rules="{'available': ['@st','@et', res_date, 'startTime', selectedField.id] }" v-slot="{ errors}">                        
                               <dropdown id="starttime" :options="startTimeOptions" v-model="startTime"  @change="getDuration()"></dropdown> 
                               <span class="w3-red">{{ errors[0] }}</span>
                           </ValidationProvider>
                       </div>
                       <div class="w3-third  ">
                           <label>Until</label>
                           <ValidationProvider  vid="et"   :rules="{'available': ['@st','@et', res_date, 'endTime', selectedField.id] }" v-slot="{ errors}">                        
                               <dropdown id="endtime" :options="endTimeOptions"  v-model="endTime" @change="getDuration()"></dropdown> 
                               <span>{{ errors[0] }}</span>
                           </ValidationProvider>

                       </div>
                   </ValidationObserver> 

即使有这样一个非常简单的验证规则，我每次都只是返回 true：

extend('available', {
        validate(value, {s, e, dt, which, field } ) { 
            console.log("validate", which );
            return true;

        },
        message: 'The time is not available ', 
        params:[ 's', 'e', 'dt', 'which', 'field']
    });

当我输入表单组件时，它会为每个字段验证一次。但随后的验证发生了 3 次。这可能与我如何形成我的规则对象有关吗？我已经改变了模式，但是如果我尝试“懒惰”，它在输入表单后根本不会验证。请注意，这是在选择下拉输入中。

Answer 1

我看到两个字段都在规则中引用了自己：

<ValidationProvider vid='st' :rules="{'available': ['@st','@et', res_date, 'startTime', selectedField.id] }" v-slot="{ errors}">                        

这就是它每次更改都会触发多次验证尝试的原因，因为它会验证输入本身并验证每个目标字段，因此对于相同的输入，它会验证 2 次，而对于另一个字段则再验证一次。

您应该只引用其他字段并避免引用自身，请改用value。

<ValidationProvider vid='st' :rules="{'available': ['@et', res_date, 'startTime', selectedField.id] }" v-slot="{ errors}">                        

您需要更改您的规则实施以将其考虑在内。