Vuelidate:根据other复选框将字段设为可选(也应适用于自定义验证)

<template>
  <form @submit.prevent="submitForm">
    <input type="checkbox" v-model="other" /> Other
    <input type="text" v-model="additionalField" :class="{ 'is-invalid': $v.additionalField.$error }" />
    <span v-if="$v.additionalField.$error">Additional field is required if 'Other' is checked.</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { required, optional } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';

export default {
  setup() {
    const state = reactive({
      other: false,
      additionalField: ''
    });

    const rules = {
      additionalField: {
        required: required,
        optionalIfOtherNotChecked: () => !state.other
      }
    };

    const v$ = useVuelidate(rules, state);

    function submitForm() {
      v$.value.$touch();
      if (!v$.value.$invalid) {
        // Submit form data
      }
    }

    return { ...toRefs(state), v$, submitForm };
  }
};
</script>

<style>
.is-invalid {
  border-color: red;
}
</style>