Блог

Пожалуйста, ознакомьтесь с этим документом.

В приведенном здесь примере мне нужно показать значения min и max в моем сообщении.

Как я могу это сделать?

Обновленные ответы

Эти страницы мне помогли:

• Имена целевых полей
• между правилом
• Правила выражения объекта
• Сообщения как функции

Вот как вы можете добиться этого, ссылаясь на различные входные данные.

 <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 amp;amp; 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" .

Позвольте мне посмотреть, смогу ли я найти способ его записи, сославшись на другое поле!