Vuelidate：仅当指定属性为true时验证复选框

我有一个登录表单，部分用户登录时需要勾选表单中的复选框。此时需确保用户确实勾选了该复选框，复选框仅在showAcceptTermsBox属性为true时显示，否则隐藏。我希望仅当复选框可见时才对其进行验证，否则忽略该验证。但当前无论showAcceptTermsBox为true还是false，复选框都会被验证。

我的Vue组件代码如下（省略了密码等无关部分）：

<script setup lang="ts">
import { ref, defineProps, computed } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required, sameAs, email as emailValidation, requiredIf, helpers } from '@vuelidate/validators';

interface Props {
    showAcceptTermsBox: boolean;
}

const props = defineProps<Props>();

const email = ref('');
const acceptTerms = ref(false);

const rules = computed(() => ({
    email: {
        required: helpers.withMessage('Please fill out e-mail', required),
        email: helpers.withMessage('Please fill out e-mail correctly', emailValidation)
    },
    acceptTerms: {
        required: helpers.withMessage('Please accept terms and conditions', requiredIf(() => props.showAcceptTermsBox)),
        sameAs: helpers.withMessage('Please accept terms and conditions', sameAs(true))
    }
}));

const v$ = useVuelidate(rules, {
    email,
    acceptTerms
}, {
    $scope: false
});
</script>

<template>
    <form>
        <label for="email">E-mail:</label>
        <input type="email" v-model="email" id="email" />
        <div v-if="showAcceptTermsBox">
            <input type="checkbox" v-model="acceptTerms" id="acceptterms" />
            <label for="acceptterms">Accept</label>
        </div>
        <button type="submit">Submit</button>
    </form>
</template>

问题核心：能否在使用sameAs验证复选框时，实现类似requiredIf的条件验证逻辑？

你可以使用Vuelidate提供的helpers.when工具函数，为sameAs规则添加条件判断，让它仅在showAcceptTermsBox为true时才执行验证。修改acceptTerms的验证规则如下：

acceptTerms: {
    required: helpers.withMessage('Please accept terms and conditions', requiredIf(() => props.showAcceptTermsBox)),
    sameAs: helpers.withMessage(
        'Please accept terms and conditions',
        // 仅当showAcceptTermsBox为true时，才触发sameAs(true)验证
        helpers.when(() => props.showAcceptTermsBox, sameAs(true))
    )
}

原理说明 #

• helpers.when(condition, validator)会根据传入的条件判断是否执行后续的验证规则：当condition返回true时，才会运行validator；否则直接跳过该规则的验证。
• 这样修改后，当复选框隐藏（showAcceptTermsBox为false）时，sameAs规则不会被触发，也就不会因为acceptTerms为false而报错。
• 同时保留requiredIf规则，确保复选框显示时必须被勾选，双重保障验证逻辑的正确性。

完整修改后的代码 #

<script setup lang="ts">
import { ref, defineProps, computed } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required, sameAs, email as emailValidation, requiredIf, helpers } from '@vuelidate/validators';

interface Props {
    showAcceptTermsBox: boolean;
}

const props = defineProps<Props>();

const email = ref('');
const acceptTerms = ref(false);

const rules = computed(() => ({
    email: {
        required: helpers.withMessage('Please fill out e-mail', required),
        email: helpers.withMessage('Please fill out e-mail correctly', emailValidation)
    },
    acceptTerms: {
        required: helpers.withMessage('Please accept terms and conditions', requiredIf(() => props.showAcceptTermsBox)),
        sameAs: helpers.withMessage(
            'Please accept terms and conditions',
            helpers.when(() => props.showAcceptTermsBox, sameAs(true))
        )
    }
}));

const v$ = useVuelidate(rules, {
    email,
    acceptTerms
}, {
    $scope: false
});
</script>

<template>
    <form>
        <label for="email">E-mail:</label>
        <input type="email" v-model="email" id="email" />
        <div v-if="showAcceptTermsBox">
            <input type="checkbox" v-model="acceptTerms" id="acceptterms" />
            <label for="acceptterms">Accept</label>
        </div>
        <button type="submit">Submit</button>
    </form>
</template>

内容的提问来源于stack exchange，提问作者Kim Andersen