Как создать собственные правила проверки с помощью VeeValidate 3 и vue.js

Question 1

Я хочу создать собственные правила для формы.

Пример будет таким:

     <label class="form-label">Price range from</label>
     <validation-provider rules="required_if:price_to" name="Price range from"
            v-slot="{ errors }">
        <input v-model="price_range_from" type="number"
                        ref="price_from">
        <span class="validation-error form-span">{{ errors[0] }}</span>
    </validation-provider>
                        </div>
                        <div class="ml-2 w-100">
     <label class="form-label">Price range to</label>
     <validation-provider name="Price range to"
                                                 v-slot="{ errors }">
        <input v-model="price_range_to" type="number" class="form-control"
                       ref="price_to" name="price_range_to">
        <span class="validation-error form-span">{{ errors[0] }}</span>
     </validation-provider>

Из этой части формы я хочу создать rule с такой логикой:

input из price_range_from равно required, если price_range_to поле не null.
input из price_range_from не может быть больше затем price_range_to.
Наоборот.

Сценарий:

import {ValidationProvider, ValidationObserver, extend} from 'vee-validate';
import * as rules from "vee-validate/dist/rules";
import {required} from 'vee-validate/dist/rules';

Object.keys(rules).forEach(rule => {
    extend(rule, rules[rule]);
});

extend('required', {
    ...required,
    message: 'This field is required'
});

Пытался прочитать документацию на [https://logaretm.github.io/ vee-validate/guide/forms.html] Но не смог найти ответ, как создавать собственные правила.

Был бы рад, если бы кто-нибудь показал и показал пример, который я мог бы понять и двигаться вперед и создавать больше пользовательских правил.

javascript forms vue.js vuejs2 vee-validate

1

ViktorasssIT 10 Апр 2020 в 13:47

Answer

Это можно сделать, настроив таргетинг на другие поля: https://vee-validate.logaretm.com/v3/advanced/cross-field-validation.html#targeting-other-fields

import { extend } from 'vee-validate';

extend('password', {
  params: ['target'],
  validate(value, { target }) {
    return value === target;
  },
  message: 'Password confirmation does not match'
});

...

<ValidationObserver>
  <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
    <input type="password" v-model="password">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>


  <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
    <input type="password" v-model="confirmation">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>

Прочтите документы, чтобы увидеть больше статей о том, как это работает. В основном @confirm превращается в target в пользовательском правиле и соответствует атрибуту имени на входе.

Функция validate в пользовательском правиле просто возвращает логическое значение, указывающее, является ли поле действительным или нет, поэтому вы можете добавить туда любую пользовательскую логику и просто убедиться, что оно возвращает логическое значение.

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

2

agm1984 23 Сен 2021 в 00:52

Question 2

Это можно сделать, настроив таргетинг на другие поля: https://vee-validate.logaretm.com/v3/advanced/cross-field-validation.html#targeting-other-fields

import { extend } from 'vee-validate';

extend('password', {
  params: ['target'],
  validate(value, { target }) {
    return value === target;
  },
  message: 'Password confirmation does not match'
});

...

<ValidationObserver>
  <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
    <input type="password" v-model="password">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>


  <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
    <input type="password" v-model="confirmation">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>

Прочтите документы, чтобы увидеть больше статей о том, как это работает. В основном @confirm превращается в target в пользовательском правиле и соответствует атрибуту имени на входе.

Функция validate в пользовательском правиле просто возвращает логическое значение, указывающее, является ли поле действительным или нет, поэтому вы можете добавить туда любую пользовательскую логику и просто убедиться, что оно возвращает логическое значение.

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

2

agm1984 23 Сен 2021 в 00:52

Как создать собственные правила проверки с помощью VeeValidate 3 и vue.js

1 ответ

Похожие вопросы

Новые вопросы

javascript