проверять различные значения текстовых полей - PullRequest
Новая
       69

проверять различные значения текстовых полей

0 голосов
/ 20 февраля 2020

Я использую vee-avlidate 3 и Nuxt. js

Как создать правило, которое проверяет, отличаются ли значения двух текстовых полей?

Например, поле current_password должно отличаться от поля new_password.

Пароль. vue

<template>
  <v-app>
    <ValidationObserver ref="form" v-slot="{ invalid, validated, passes, validate }">
      <form>
        <ValidationProvider rules="required|min:6" v-slot="{ errors, valid }">
          <v-text-field
            v-model="current_password"
            label="Current Password"
            type="password"
            :success="valid"
            :error-messages="errors"
          />
        </ValidationProvider>
        <ValidationProvider rules="required" v-slot="{ errors, valid }">
          <v-text-field
            v-model="new_password"
            label="New Password"
            type="password"
            :success="valid"
            :error-messages="errors"
          />
        </ValidationProvider>
      </form>
    </ValidationObserver>
  </v-app>
</template>

<script>
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
  data() {
    return {
      current_password: "",
      new_password: "",
    };
  },
  components: {
    ValidationObserver,
    ValidationProvider
  },
};
</script>

Спасибо

1 Ответ

0 голосов
/ 29 марта 2020

Прочитайте документацию для проверки по полям . По сути это шаги

  1. Обтекание полей в одном и том же компоненте ValidationObserver.
  2. Присвойте каждому полю свойство name
  3. Ссылка на имя целевого поля или значение vid в правилах других.

Для вашего кода: 

<template>
  <v-app>
    <ValidationObserver ref="form" v-slot="{ invalid, validated, passes, validate }">
      <form>
        <ValidationProvider rules="required|min:6" v-slot="{ errors, valid }" name='password'>
          <v-text-field
            v-model="current_password"
            label="Current Password"
            type="password"
            :success="valid"
            :error-messages="errors"
          />
        </ValidationProvider>
        <ValidationProvider rules="required|distinct:@password" v-slot="{ errors, valid }" name='new password'>
          <v-text-field
            v-model="new_password"
            label="New Password"
            type="password"
            :success="valid"
            :error-messages="errors"
          />
        </ValidationProvider>
      </form>
    </ValidationObserver>
  </v-app>
</template>

<script>
import { ValidationObserver, ValidationProvider, Extend } from "vee-validate";

extend('distinct', {
  params: ['target'],
  validate(value, { target }) {
    return value !== target;
  },
  message: 'Fields can not be the same'
});

export default {
  data() {
    return {
      current_password: "",
      new_password: "",
    };
  },
  components: {
    ValidationObserver,
    ValidationProvider
  },
};
</script>
...