如何在 vee-validate 中使用自定义消息进行跨字段验证？

Question

请参阅 this 文档。

在此处显示的示例中，我需要在消息中显示 min 和 max 值。

我该怎么做？

Answer 1

更新答案

那些页面帮助了我：

这就是您如何通过引用各种输入来实现这一点。

<template>
  <ValidationObserver>
    <ValidationProvider
      :rules="{ required: true, between: { min: '@min', max: '@max' } }"
      v-slot="{ errors }"
    >
      <ValidationProvider
        rules="required"
        vid="min"
        v-slot="{ errors, message }"
      >
        <input type="number" v-model.number="minValue" />
        <span>{{ errors[0] }}</span>
        <div>message here: {{ message }}</div>
      </ValidationProvider>

      <input type="number" v-model.number="value" />
      <span>{{ errors[0] }}</span>

      <ValidationProvider vid="max" rules="required" v-slot="{ errors }">
        <input type="number" v-model.number="maxValue" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
    </ValidationProvider>
  </ValidationObserver>
</template>

<script>
import { extend } from "vee-validate";

extend("between", {
  params: ["min", "max"],
  validate(value, { min, max }) {
    return value >= min && value <= max;
  },
  message: (_, values) =>
    `This field value must be between ${values["_min_"]} and ${values["_max_"]}`,
});

export default {
  data: () => ({
    minValue: 0,
    value: 1,
    maxValue: 10,
  }),
};
</script>

这是一个有效的 codesandbox。

不确定为什么引用另一个字段到目前为止不起作用：https://vee-validate.logaretm.com/v3/advanced/cross-field-validation.html#targeting-other-fields

只要将rules="required|between:@min,@max"改成rules="required|between:4,25"即可。

我看看能不能通过引用别的字段找到写法！

如何在 vee-validate 中使用自定义消息进行跨字段验证？

How to make a cross field validation with a custom message in vee-validate?

vue.js

nuxt.js

vee-validate

更新答案