vee-validate 3 个可选地址字段，但一个是必需的答案

【问题标题】：vee-validate 3 optional address fields but one is requiredvee-validate 3 个可选地址字段，但一个是必需的
【发布时间】：2020-10-11 08:13:29
【问题描述】：

我正在使用 vee-validate 表单验证，我有 3 个地址字段：

门牌号
房屋名称
平号

所有 3 个都是可选，因为一个地址可能只有 1 个，但我需要用户填写至少一个。所以我不能要求它们中的任何一个，并且跨字段验证的文档只处理对单个或多个字段进行特定验证：

https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields

处理此问题的最佳方法是什么？我对项目中的自定义验证规则并不陌生，我只是不明白这里的方法。

谢谢。

<div class="flex flex-wrap pb-2">
  <FormTextInput
    name="addressBuildingNo"
    v-model="value.buildingNo"
    type="text"
    :label="$t('formFields.addressBuildingNo')"
    placeholder="e.g 10"
    :hint="$t('formHints.optional')"
  />

  <FormTextInput
    name="addressFlatNo"
    v-model="value.flatNo"
    type="text"
    :label="$t('formFields.addressFlatNo')"
    :hint="$t('formHints.optional')"
  />

  <FormTextInput
    name="addressBuildingName"
    v-model="value.buildingName"
    type="text"
    :label="$t('formFields.addressBuildingName')"
    :hint="$t('formHints.optional')"
  />
</div>

【问题讨论】：

标签： vee-validate

【解决方案1】：

最后我只是创建了一个隐藏字段，其值是所有 3 个字段的组合。

<FormTextInput name="addressBuilding" type="hidden" v-model="compBuildingValue" rules="required" />

compBuildingValue() {
  return `${this.value.buildingNo.trim()}${this.value.flatNo.trim()}${this.value.buildingName.trim()}`
}

【讨论】：

【解决方案2】：

将每一个都包装在一个 ValidationProvider 中，并在每一个上设置所需的规则，如果其他两个都没有填写，则它是必需的。所以第一个看起来像这样：

<ValidationProvider :rules="{ 'required': (!value.buildingName && !value.flatNo)">
  <FormTextInput
    name="addressBuildingNo"
    v-model="value.buildingNo"
    type="text"
    :label="$t('formFields.addressBuildingNo')"
    placeholder="e.g 10"
    :hint="$t('formHints.optional')"
  />
</ValidationProvider>

如果您想要更复杂的验证，您还可以为每个验证器编写跨字段验证器，以更具体地检查事物（按照您已经指出的文档）。在此处查看简化示例：https://codesandbox.io/s/veevalidate-30-cross-field-optional-3dzxd

【讨论】：