如何在 vuelidate 中设置验证规则以具有与对象字段相同的值？

Question

假设我有一个带有如下数据的 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 来构建表单，因此以另一种方式格式化数据不是一种选择。该data字段将存储实际数据。

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

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

该required规则的作品，但sameAsPassword规则不能正常工作。它总是返回错误，即使我确定我输入了相同的密码。我想这不是与正确的领域进行比较。如何设置规则以便它与正确的字段进行比较？

Answer 1

new_password不是 的兄弟姐妹repeat_password.data。来自内置的验证器文档

• Locator 可以是同级属性名称或函数。当作为函数提供时，它接收验证下的模型作为参数，并将其绑定到组件实例，因此您可以访问其所有属性和方法，即使在嵌套验证的范围内也是如此。

所以一个函数需要传递给sameAs：

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

同时，为了在this函数内部工作，data需要将箭头函数改为返回数据。IE

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',
        },
      },
    }
  },