如何使用 vee-validate 創建交叉驗證字段？

Question

我正在嘗試使用 vee-validate 根據其他字段（選擇）的選擇來驗證 3 個字段（文本字段），但我似乎不知道如何執行此操作。

基本上，我有一個包含 5 個值的選擇框，如果所選值等於 1 或 2，則表單中的其他 3 個字段是必需的。

這是一個例子

如果我選擇“Ausente”（值 1）或“A desenvolver”（值 2），則其他 3 個字段是必需的。

這是我想出的代碼

<v-col cols="2">
    <validation-provider
        rules="required"
        v-slot="{ errors }"
        name="skillLevel"
    >  <!-- If this select has value of 1 or 2 -->
        <v-select
            v-model="answers[n-1][index].skillLevel"
            outlined
            :error-messages="errors"
            :items="selectLevels"
            label="Selecione"
            item-text="level"
            item-value="value"
        ></v-select>
    </validation-provider>
</v-col>

<!-- These 3 fields must be required -->
<v-col cols="2">
    <validation-provider
        name="feedback"
        rules="required||isRequiredWith:@skillLevel"
    >
        <v-textarea v-model="answers[n-1][index].feedBack" outlined rows="3"></v-textarea>
    </validation-provider>
</v-col>

<v-col cols="2">
    <validation-provider name="selfAppraisal" rules="required">
        <v-textarea
            v-model="answers[n-1][index].selfAppraisal"
            outlined
            rows="3"
        ></v-textarea>
    </validation-provider>
</v-col>

<v-col cols="3">
    <validation-provider name="feedforward" rules="required">
        <v-textarea v-model="answers[n-1][index].feedForward" outlined rows="3"></v-textarea>
    </validation-provider>
</v-col>

這是我的 js

import { required} from "vee-validate/dist/rules";
import {
  extend,
  ValidationObserver,
  ValidationProvider,
  setInteractionMode
} from "vee-validate";

setInteractionMode("eager");

extend("required", {
  ...required,
  message: "Campo não pode ficar em branco"
});

extend("isRequiredWith", {
  params: ["target"],
  validate(value, { target }) {
    if (target === 1 || target === 2) {
      console.log(target);
      //Problem is here, i'm messing up the value/target, don't what i need to check
      console.log("cannot be empty");
    }
  },
  message: "Required"
});

Answer 1

我不確定出了什么問題，看起來您的代碼應該基本上可以工作。 不過，我試了一下，當目標值更改時，它從不isRequiredWith運行isRequiredWith驗證。 所以這是一種不需要制定自己的規則的替代方法：

<validation-provider
    name="feedback"
    :rules="{required:(answers[n-1][index].skillLevel == 1 || answers[n-1][index].skillLevel == 2)}"
>
    <v-textarea v-model="answers[n-1][index].feedBack" outlined rows="3"></v-textarea>
</validation-provider>

它不漂亮，但它有效。 在此處查看簡化示例： https : //codesandbox.io/s/veevalidate-30-cross-field-validation-gpkj9