Javascript vee验证不同的文本字段值

我使用vee avlidate 3和Nuxt.js

如何制定规则检查两个文本字段值是否不同

例如，

current\u password

字段应该与

new\u 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>

从“vee validate”导入{ValidationObserver，ValidationProvider}；
导出默认值{
数据（）{
返回{
当前密码：“”，
新密码：“”，
};
},
组成部分：{
验证观察者，
验证提供程序
},
};

---

感谢您阅读本文档以获取更多信息。基本上，这些步骤是

将字段包装在相同的

ValidationObserver

组件中

为每个字段指定一个name属性

在另一方的规则中引用目标字段名或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 validate”导入{ValidationObserver、ValidationProvider、Extend}；
扩展（'distinct'{
参数：['target']，
验证（值，{target}）{
返回值！==目标；
},
消息：“字段不能相同”
});
导出默认值{
数据（）{
返回{
当前密码：“”，
新密码：“”，
};
},
组成部分：{
验证观察者，
验证提供程序
},
};

您能显示您当前的状态吗code@depperm代码addedI将查看并制定一个规则以获取2个参数