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

【问题标题】：How to set validate rules in vuelidate to have value same as a field of an object?如何在 vuelidate 中设置验证规则以使其值与对象的字段相同？
【发布时间】：2019-05-07 02:56:07
【问题描述】：

假设我有一个带有如下数据的 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 规则无效。它总是返回错误，即使我确定我输入了相同的密码。我想它没有与正确的字段进行比较。如何设置规则以便与正确的字段进行比较？

【问题讨论】：

标签： javascript forms vue.js antd vuelidate

【解决方案1】：

new_password 不是repeat_password.data 的兄弟。来自built in validator docs

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

所以需要将一个函数传递给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从箭头函数更改为返回数据。即

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

【讨论】：

好像this在函数内部不一样，无法通过这种方式获取变量。
Ops，在将数据从箭头函数更改为返回后，这似乎工作了。
使用这个解决方案我得到了这个错误：'this' implicitly has type 'any' because it does not have a type annotation.你对我有什么建议吗？可能是因为我使用的是 typescript 类 'vue property decoratory'。
不确定打字稿，但也许this 会有所帮助

【解决方案2】：

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

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

您可能会遇到上下文问题..

我不知道您是否需要验证中的数据...您可以试试这个：

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

【讨论】：

是的，我需要验证中的数据。是ant-design对form要求的数据格式。
但是将箭头函数更改为返回的好点，这使得 user2718281 的答案完美。