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

时间:2019-05-09 13:53:03

标签: forms validation vue.js vuejs2 vuelidate

我必须基于选择字段的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>

如果用户从下拉列表中选择new和其他选项,我想将标题和内容字段的验证切换为必填。请提供解决方案以完成该任务。预先感谢。

0 个答案:

没有答案