forms - 如何根据选择字段的 onChange 事件在 vuelidate 中启用所需的验证

Question

我必须根据选择字段的 onChange 事件为输入字段启用所需的验证。我在我的项目中使用 vuelidate 包进行表单验证。请提供解决方案来完成它。

我的模板代码如下：

<template>
    <section class="page_blk">
        <form @submit="submitForm($event)" class="cryp_form">
            <div class="input_ctrl_wrp">
                                <label for="username">Template</label>
                                <div class="input_select">
                                    <select @change="getTemplate" v-model="$v.adForm.tnc.$model" name="" id="">
                                        <option value="">Select</option>
                                        <option value="New">New</option>
                                        <option :value="term.idTnCTemplate" 
                                        v-for="term in termsList" 
                                        :key="term.idTnCTemplate">{{term.title}}</option>

                                    </select>
                                    <i class="fal fa-angle-down"></i>
                                </div>

                            </div>

                            <div class="input_ctrl_wrp">
                                <label for="username">Title</label>
                                <div class="input_text">
                                    <input v-model="$v.adForm.title.$model" placeholder="" type="text">
                                </div>

                            </div>

                            <div class="input_ctrl_wrp">
                                <label for="username">Terms Of Trade</label>
                                <div class="input_textarea">
                                    <textarea v-model="$v.adForm.content.$model" name="" rows="10"></textarea>
                                </div>

                            </div>
        </form>
    </section>
</template>

我的脚本如下：

<script>

import { required,requiredIf, decimal, numeric } from "vuelidate/lib/validators";


export default {

    data() {
        return {

            adForm: {

                tnc: '',
                title: '',
                content: '',
            }
        }
    },
    validations: {
        adForm: {
            tnc: {
                required
            },
            title: {
                required
            },
            content: {
                required: requiredIf( (abc) => {
                    console.log('abc',abc)
                    return true;
                })
            },
            schedule: {
                required
            }
        }
    },
    methods: {

        submitForm(e) {


        },
        getTemplate(e) {

        }

    },
    mounted() {

    }
}
</script>

如果用户从下拉列表中选择新选项和其他选项，我想将验证切换为标题和内容字段所需的。请提供解决方案来完成它。提前致谢。

标签： formsvalidationvue.jsvuejs2vuelidate