验证不同的文本字段值

Question

我使用vee 3和Nuxt.js。

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

例如，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

阅读交叉域验证的文档。实质上，这些步骤是

1. 将字段包装在同一个ValidationObserver组件中。
2. 为每个字段指定一个名称属性
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>