如何在 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 规则无效。它总是 return 错误，即使我确定我输入了相同的密码。我想这不是与正确的领域进行比较。我如何设置规则以使其与正确的字段进行比较？

Answer 1

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

Locator can be either a sibling property name or a function. When provided as a function, it receives the model under validation as argument and this is bound to the component instance so you can access all its properties and methods, even in the scope of a nested validation.

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

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

Answer 2

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

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

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

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

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

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

How to set validate rules in vuelidate to have value same as a field of an object?

javascript

forms

vue.js

antd

vuelidate