vee 验证不同的文本字段值

Question

我使用 vee-avlidate 3 和 Nuxt.js

我如何制定检查 2 个文本字段值是否不同的规则？

例如 current_password 字段应不同于 new_password 字段。

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>

谢谢

Answer 1

阅读 cross field validation 的文档。基本上步骤是

将字段包装在同一个 ValidationObserver 组件中。
为每个字段命名属性
引用对方规则中的目标字段名或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>

vee 验证不同的文本字段值

vee-validate different text-field values

javascript

vue.js

vuetify.js

nuxt.js

vee-validate