javascript - vee-validate 3.x 跨域验证

Question

我有一个组件 FromTo，它采用 2 个 Timepicker 组件并交叉验证一个 Timepicker 组件(From)到另一个(To)。 timepicker 应用了一个 greater 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 文档，为了使跨域验证规则起作用，必须满足以下条件:

Wrap the fields within the same ValidationObserver component. The target field must have a name or vid prop. Properly reference the target field name or vid value in the rules of the other.

我也正确引用了字段

To reference another field's value, add a @ at the beginning of a param to signal to vee-validate that it should substitute the param with the target field value. So instead of getting a static "confirm" string, you will get the field's value instead.

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

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

但我真的很想使用 @ 符号来定位字段值。我已经尽可能地简化了这个示例，并且所有内部 v-model 绑定(bind)都是正确的。 (从、到和整个组件)。很长一段时间以来，我一直在努力解决这个问题，并仔细阅读红色文档，非常感谢任何帮助...

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 验证器似乎已经做了同样的事情，而且我还没有它的代码。