Как сделать пользовательские правила проверки с VeeValidate 3 и vue. js - PullRequest
Новая
       41

Как сделать пользовательские правила проверки с VeeValidate 3 и vue. js

0 голосов
/ 10 апреля 2020

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

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

     <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, который имеет лог c этого:

  • 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] Но не смог не найти ответ, как сделать пользовательские правила.

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

...