Vuelidate 使输入字段 1 或输入字段 2 成为必需的“或”验证器？

Question

我正在尝试将 Vuelidate 实现到我的 Vue 表单中。我有 2 个字段，电话号码和电子邮件。我想检查其中一个是否已设置。我假设这是“或”验证器，但我找不到任何如何实现它的示例。我在这里找到了一些东西并尝试复制它，但是得到 电话未定义。我还在 GitHub 上找到了一些东西，但这又不起作用。我只是不明白这是如何运作的。因此，如果输入其中一个字段，验证就会通过，只有当两个字段都为空时才会失败。我对 Or 验证器的理解是否正确？如果是，它应该如何工作？我希望有人能给我提示。提前非常感谢您。

data: () => ({

form: {
  email: '',
  phone:'',
},
}),

validations: {
  form: {

    email:{
      required,
      mycustomval: or(phone)
    },
    phone:{
     required
    },
 }
}

Answer 1

我现在可以使用它了。问题是我使用了 form:{} 所以我需要使用 this.form.phone 或 this.form.mobile 来获取值。

export default {

mixins: [validationMixin],
data: () => ({
  form: {
    email: '',
    phone:'',
  },
}),

所以为了让它工作，我必须使用：

  validations: {

    form: {
      email:{
        required (v) {
        return this.form.phone|| required(v)
      }},

      phone: {
        required (v) {
          return this.form.email|| required(v)
      }},
   },

Answer 2

您可以通过访问所需函数的第二个参数来获取

form

对象

validations: {
    form: {
      email:{
        required (v, form) {
          // { email: '', phone: '' }
          console.log(form)
          return form.phone || required(v)
        }
      },
     },
   },

如果您正在使用对象验证数组，这尤其有用。

data() {
  return {
    data: [{ email: '', isCurrentUserEmailRequired: true }],
  };
},

验证将是

validations: {
    data: {
      $each: {
        email: {
          required (v, obj) {
            // { email: '', isCurrentUserEmailRequired: true }
            console.log(obj)
            return obj.isCurrentUserEmailRequired && required(v)
          },
        },
      },
     },
   },