Javascript 如何在vuelidate中设置验证规则，使其值与对象的字段相同？

假设我有一个vue组件，其数据如下：

  data: () => ({
    form: {
      old_password: {
        data: '',
        type: 'password',
        label: 'Old Password',
      },
      new_password: {
        data: '',
        type: 'password',
        label: 'New Password',
      },
      repeat_password: {
        data: '',
        type: 'password',
        label: 'New Password Confirmation',
      },
    },
  }),

数据是以这种方式格式化的，因为我正在使用另一个插件ant design来构建表单，因此不能以另一种方式格式化数据。

数据

字段将存储实际数据

然后，我为vuelidate设置了以下验证规则

  validations: {
    form: {
      old_password: {
        data: { required },
      },
      new_password: {
        data: { required },
      },
      repeat_password: {
        data: { sameAsPassword: sameAs('new_password') },
      },
    },
  },

---

required

规则起作用，但

sameAsPassword

规则不起作用。它总是返回错误，即使我确信我输入了相同的密码。我猜这不是一个正确的字段。如何设置规则，使其与正确的字段进行比较？

new\u password

不是

repeat\u password.data

的同级项。从

• 定位器可以是同级属性名或函数。当作为函数提供时，它接收验证中的模型作为 参数，并将其绑定到组件实例，以便您可以访问 它的所有属性和方法，即使在嵌套 验证

因此，需要将函数传递给

sameAs

：

validations: {
    form: {
      old_password: {
        data: { required },
      },
      new_password: {
        data: { required },
      },
      repeat_password: {
        data: { 
          sameAsPassword: sameAs(function() {
            return this.form.new_password.data;
          }) 
        },
      },
    },
  },

同时，要使

this

在函数内部工作，需要将

数据

从箭头函数更改为返回数据。i、 e

data() {
    return {
      form: {
        old_password: {
          data: '',
          type: 'password',
          label: 'Old Password',
        },
        new_password: {
          data: '',
          type: 'password',
          label: 'New Password',
        },
        repeat_password: {
          data: '',
          type: 'password',
          label: 'New Password Confirmation',
        },
      },
    }
  },

---

首先：对数据使用箭头函数不是一个好主意。你应使用：

data() {
 return {
   form: {}
 }
}

你可以得到一个上下文问题

我不知道您是否需要验证中的数据…您可以尝试以下方法：

export default {
  data() {
    return {
      form: {
        nestedA: '',
        nestedB: ''
      }
    }
  },
  validations: {
    form: {
      nestedA: {
        required
      },
      nestedB: {
        required
      }
    }
  }
}

---

似乎

此

在函数内部不相同，无法以这种方式获取变量。Ops，将数据从arrow函数更改为return后，这似乎可以正常工作。使用此解决方案，我会遇到以下错误：

'this'隐式地具有类型“any”，因为它没有类型批注。

您有什么建议吗？可能是因为我正在使用typescript类“vue property decoratory”。不确定typescript是否正确，但可能会有所帮助。是的，我需要验证中的数据。这是ant表单设计所需的数据格式，但更改箭头函数返回的一个好方法，使得user2718281的答案更完美。