时间戳

首页 > 解决方案 > 如何在 vuelidate 中设置验证规则以使其值与对象的字段相同？

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

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

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

规则有效，required但sameAsPassword规则无效。它总是返回错误，即使我确定我输入了相同的密码。我想它没有与正确的字段进行比较。如何设置规则以便与正确的字段进行比较？

标签： javascriptformsvue.jsantdvuelidate

解决方案

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

  • 定位器可以是同级属性名称或函数。当作为函数提供时，它接收正在验证的模型作为参数，并且 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需要将箭头函数改为返回数据。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',
        },
      },
    }
  },

推荐阅读