VeeValidate 自定义验证的奇怪结果

Posted 2023-03-06

【中文标题】VeeValidate 自定义验证的奇怪结果

【英文标题】：VeeValidate odd results on custom validation

【发布时间】：2020-04-30 17:35:25

【问题描述】：

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

<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 次。这可能与我如何形成我的规则对象有关吗？我已经改变了模式，但是如果我尝试“懒惰”，它在输入表单后根本不会验证。请注意，这是在选择下拉输入中。

【参考方案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">                        

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

【讨论】：

好的，我明白了，谢谢。另一件事是我会动态更改选项。不过，我不会更改该值。这会触发验证吗？

另外，如果我在这些字段中的任何一个上将模式设置为“渴望”，在进行您提供的更改后，它只会在组件安装时验证。它永远不会验证更改。

如果该字段之前已验证，则更改选项将触发验证。交互模式仅在您使用的组件发出正确的事件时才起作用，否则您将自己发出这些事件 (change)。