vee 验证不同的文本字段值答案

【问题标题】：vee-validate different text-field valuesvee 验证不同的文本字段值
【发布时间】：2020-06-05 05:09:25
【问题描述】：

我使用 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>

谢谢

【问题讨论】：

你能显示你当前的代码吗
@depperm 代码添加
我会查看docs 并制定一个规则以获取 2 个参数

标签： javascript vue.js vuetify.js nuxt.js vee-validate

【解决方案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>

【讨论】：