3

我有一个使用收音机交换选择列表的表单，但验证消息似乎无法正常工作。这是我的表单，TypeA 验证消息确实有效： 在此处输入图像描述

但是当我将单选按钮更改为 TypeB 时，验证消息不起作用： 在此处输入图像描述

并且如果我单击提交按钮并且如果 TypeA 验证不正确并且我更改为 TypeB 提交它，则验证将不会通过，因为它看起来像 vee-validate 仅验证了 TypeA ...

这是我的代码：

<form id="form" @submit.prevent="validateBeforeSubmit">
    <label>Type A</label>
    <input type="radio" v-model="Type" value="TypeA" />
    <label>Type B</label>
    <input type="radio" v-model="Type" value="TypeB" />

    <table>
        <tr v-if="Type==='TypeA'">
            <td>
                <select v-model="TypeA" v-validate="'required|not_in:Choose'" name="TypeA">
                    <option v-for="option in TypeAOptions" v-bind:value="option.value">
                        {{ option.value }}
                    </option>
                </select>
                <span v-if="errors.has('TypeA')">
                    {{ errors.first('TypeA')}}
                </span>
            </td>
        </tr>
        <tr v-if="Type==='TypeB'">
            <td>
                <select v-model="TypeB" v-validate="'required|not_in:Choose'" name="TypeB">
                    <option v-for="option in TypeBOptions" v-bind:value="option.value">
                        {{ option.value }}
                    </option>
                </select>
                <span v-if="errors.has('TypeB')">
                    {{ errors.first('TypeB')}}
                </span>
            </td>
        </tr>
    </table>
    <button type="submit">Submit</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<script>
    Vue.use(VeeValidate);
    var form = new Vue({
        el: '#form',
        data: {
            Type: 'TypeA',
            TypeA: 'Choose',
            TypeAOptions: [{
                    value: 'Choose'
                },
                {
                    value: 'A',
                },
                {
                    value: 'B'
                },
                {
                    value: 'C'
                },
                {
                    value: 'D'
                }
            ],

            TypeB: 'Choose',
            TypeBOptions: [{
                    value: 'Choose'
                },
                {
                    value: '1'
                },
                {
                    value: '2'
                },
                {
                    value: '3'
                },
                {
                    value: '4'
                }
            ],
        },
        methods: {
            validateBeforeSubmit() {
                this.$validator.validateAll().then((result) => {
                    if (result) {
                        alert("Submit Success");
                        return;
                    }
                    alert("Correct them errors!");
                });
            }
        }
    })
</script>

我不知道如何解决这个问题，有人可以帮助我吗？

4

2 回答 2

8

v-show改为使用v-if来观察更改，因为v-if在 DOM 中添加/删除 dom 元素和 vee-validate 检查。

<form id="form" @submit.prevent="validateBeforeSubmit">
    <label>Type A</label>
    <input v-on:change="changeType" type="radio" v-model="Type" value="TypeA" />
    <label>Type B</label>
    <input v-on:change="changeType" type="radio" v-model="Type" value="TypeB" />

    <table>
        <tr v-show="Type==='TypeA'">
            <td>
                <select v-model="TypeA" v-validate="'required|not_in:Choose'" name="TypeA">
                    <option v-for="option in TypeAOptions" v-bind:value="option.value">
                        {{ option.value }}
                    </option>
                </select>
                <span v-if="errors.has('TypeA')">
                    {{ errors.first('TypeA')}}
                </span>
            </td>
        </tr>
        <tr v-show="Type==='TypeB'">
            <td>
                <select v-model="TypeB" v-validate="'required|not_in:Choose'" name="TypeB">
                    <option v-for="option in TypeBOptions" v-bind:value="option.value">
                        {{ option.value }}
                    </option>
                </select>
                <span v-if="errors.has('TypeB')">
                    {{ errors.first('TypeB')}}
                </span>
            </td>
        </tr>
    </table>
    <button type="submit">Submit</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<script>
    Vue.use(VeeValidate);
    var form = new Vue({
        el: '#form',
        data: {
            Type: 'TypeA',
            TypeA: 'Choose',
            TypeAOptions: [{
                    value: 'Choose'
                },
                {
                    value: 'A',
                },
                {
                    value: 'B'
                },
                {
                    value: 'C'
                },
                {
                    value: 'D'
                }
            ],

            TypeB: 'Choose',
            TypeBOptions: [{
                    value: 'Choose'
                },
                {
                    value: '1'
                },
                {
                    value: '2'
                },
                {
                    value: '3'
                },
                {
                    value: '4'
                }
            ],
        },
        computed:{
        },
        methods: {
            changeType:function(){
              this.errors.clear();
            },
            validateBeforeSubmit() {
                this.$validator.validate(this.Type).then((result) => {
                    if (result) {
                        alert("Submit Success");
                        return;
                    }
                    alert("Correct them errors!");
                });
            }
        }
    })
</script>

此外，您正在验证所有字段意味着在两个下拉列表都验证时。

让它发挥作用。意味着一次只验证一个下拉列表，我更改了这一行。从

this.$validator.validateAll()

到

this.$validator.validate(this.Type)
于 2017-11-25T07:29:38.740 回答
2

该答案只是为了更新需要对 Niklesh Raut 的答案进行的一些更改，这是原始答案并且当时正确回答了问题。从那时起 vee-valdiate 已更新到 V3.0，因此需要将 vee-validate 的 cdn 指定为 V2.0 的最新版本。此外，根据此链接，vee-validate 规则“not_in”被重命名为“excluded”：https ://github.com/logaretm/vee-validate/issues/1351 。因此，这些微小的更改将使 Niklesh Raut 的代码再次运行。非常感谢他和 OP 的回答和问题。如果您觉得这很有用，请考虑对他们的答案和问题进行投票（因为他们在这里完成了繁重的工作）。

<form id="form" @submit.prevent="validateBeforeSubmit">
    <label>Type A</label>
    <input v-on:change="changeType" type="radio" v-model="Type" value="TypeA" />
    <label>Type B</label>
    <input v-on:change="changeType" type="radio" v-model="Type" value="TypeB" />

    <table>
        <tr v-show="Type==='TypeA'">
            <td>
                <select v-model="TypeA" v-validate="'required|excluded:Choose'" name="TypeA">
                    <option v-for="option in TypeAOptions" v-bind:value="option.value">
                        {{ option.value }}
                    </option>
                </select>
                <span v-if="errors.has('TypeA')">
                    {{ errors.first('TypeA')}}
                </span>
            </td>
        </tr>
        <tr v-show="Type==='TypeB'">
            <td>
                <select v-model="TypeB" v-validate="'required|excluded:Choose'" name="TypeB">
                    <option v-for="option in TypeBOptions" v-bind:value="option.value">
                        {{ option.value }}
                    </option>
                </select>
                <span v-if="errors.has('TypeB')">
                    {{ errors.first('TypeB')}}
                </span>
            </td>
        </tr>
    </table>
    <button type="submit">Submit</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.2.15/dist/vee-validate.js"></script>

<script>
    Vue.use(VeeValidate);
    var form = new Vue({
        el: '#form',
        data: {
            Type: 'TypeA',
            TypeA: 'Choose',
            TypeAOptions: [{
                    value: 'Choose'
                },
                {
                    value: 'A',
                },
                {
                    value: 'B'
                },
                {
                    value: 'C'
                },
                {
                    value: 'D'
                }
            ],

            TypeB: 'Choose',
            TypeBOptions: [{
                    value: 'Choose'
                },
                {
                    value: '1'
                },
                {
                    value: '2'
                },
                {
                    value: '3'
                },
                {
                    value: '4'
                }
            ],
        },
        computed:{
        },
        methods: {
            changeType:function(){
              this.errors.clear();
            },
            validateBeforeSubmit() {
                this.$validator.validate(this.Type).then((result) => {
                    if (result) {
                        alert("Submit Success");
                        return;
                    }
                    alert("Correct them errors!");
                });
            }
        }
    })
</script>

于 2019-09-12T08:21:19.567 回答