小编mar*_*ang的帖子

使用vee-validate验证选择列表,单选按钮交换不显示验证消息

我有表单使用无线电交换选择列表,但验证消息似乎无法正常工作.这是我的表单,TypeA验证消息是有效的: 在此输入图像描述

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

如果我单击提交按钮并且TypeA验证不正确并且我更改为TypeB以提交它,验证将不会通过,因为它看起来只是验证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> …
Run Code Online (Sandbox Code Playgroud)

vue.js vee-validate

3
推荐指数
1
解决办法
8013
查看次数

标签 统计

vee-validate ×1

vue.js ×1