Question

我有一个FromFrom组件，它需要2个Timepickers组件，并将一个Timepicker组件（ From ）交叉验证到另一个（ To ）。要为时间选择器应用一个更大 vee-validate跨域规则，如下所示：

   extend("greater", {
     params:["target"],
     validate(value, {target}){

     let regex = new RegExp("\d{2}:\d{2}", "g");

     console.log("from is "+target);   // prints @from instead of @from value
     console.log("value is "+value);

      return regex.test(value)
       &&  regex.test(target)
       &&  value > target; 

    },
     message: "To field must be greater that from field"
 });

组件主体看起来像这样

<ValidationObserver>    
        <div class="flex mb-16 flex-wrap w-full">
            <div class="mr-1">
                <label class="font-bold block">From</label>
                <ValidationProvider name="from" rules="required|time" v-slot="{ errors }">
                    <VueTimepicker 
                        v-model="val.from"
                        close-on-complete
                        :input-class="['px-3', 'py-2', 'border', 'rounded', (errors.length ? 'border-red-400' : 'border-gray-400')]" 
                        />
                    <span class="text-sm w-40 block mt-1 text-red-400" v-if="errors.length"> {{ errors[0] }} </span>
                </ValidationProvider>
            </div>
            <div>
                <label class="font-bold block">To</label>
                <ValidationProvider name="to" rules="required|time|greater:@from" v-slot="{ errors }">
                    <VueTimepicker 
                        v-model="val.to" 
                        close-on-complete
                        :input-class="['px-3', 'py-2', 'border', 'rounded', (errors.length ? 'border-red-400' : 'border-gray-400')]"
                    />
                    <span class="text-sm w-40 block mt-1 text-red-400" v-if="errors.length"> {{ errors[0] }} </span>
                </ValidationProvider>
            </div>
        </div>
    </ValidationObserver>

我可以看到我的规则已被定位，但控制台记录的是 @from 而不是@from值。根据vee-validate文档，为了使跨域验证规则起作用，必须满足以下条件：

将字段包装在同一ValidationObserver组件中。目标字段必须具有名称或vid道具。在另一个规则中正确引用目标字段名称或vid值。

我也从字段中正确引用了

要引用另一个字段的值，请在参数的开头添加一个@，以信号指示vee-validate它应将参数替换为目标字段值。因此，您将获得字段的值，而不是获取静态的“确认”字符串。

我知道我可以像这样定位静态值：

rules=`required|time|greater:${this.from}`

但是我真的很想使用@符号来定位字段值。我已尽可能简化了此示例，并且所有内部v模型绑定都是正确的。（从，到整个组件）。我已经为此花了相当长的时间，并仔细阅读了红色文档，非常感谢您的帮助...

Answer 1

我更改了您的验证功能，如下所示：

extend("greater", {
  params: ["target"],
  validate(value, { target }) {
    let regex = new RegExp(/^\d{2}:\d{2}$/);

    return regex.test(value) && regex.test(target) && value > target;
  },
  message: "To field must be greater that from field"
});

最主要的是不添加"g"，因为它不能满足您在此处的要求。除此之外，我认为您唯一真正的错误是正在使用的vee-validate版本。如果您使用最新版本（3.2.0），则您的代码通常可以正常工作，并且肯定会传递“ @from”的值，而不是该字符串。

有关基于您的代码的有效示例，请参见此处：https://codesandbox.io/s/veevalidate-30-cross-field-validation-9nebh

我删除了“时间”验证器，因为您的greater验证器似乎已经做过同样的事情，而且我仍然没有代码。

vee-validate 3.x跨域验证

1 个答案: