Vue中下拉框选中默认值时如何校验并展示必填错误提示

一、修改Dropdown子组件 #

先给子组件新增失焦事件向上通知，方便父组件在用户离开下拉框时触发校验，修改点如下：

<template>
    <!-- 原有blur事件新增emit -->
    <div class="custom-select" :tabindex="tabindex" @blur="open = false; $emit('blur')">
        <!-- 其余代码保持不变 -->
        <div class="selected" :class="{ open: open }" @click="open = !open">
            {{ selected.name }}
        </div>
        <div class="items" :class="{ selectHide: !open }">
            <div v-if="defaultValue != ''">{{defaultValue}}</div>
            <div v-for="(option, i) of options" :key="i" @click=" selected = option; open = false; $emit('input', option);">
                {{ option.name }}
            </div>
        </div>
    </div>
</template>
<script>
// 其余js逻辑保持不变即可
export default {
    props: {
        options: {
            type: Array,
            required: true,
        },
        defaultValue: {
            type: String,
            required: false,
            default: "Choose an option",
        },
        tabindex: {
            type: Number,
            required: false,
            default: 0,
        },
    },
    data() {
        return {
            open: false,
            selected: this.setDefaultValue(),
        };
    },
    mounted() {
        this.$emit("input", this.selected);
    },
    methods: {
        setDefaultValue () {
            if (this.defaultValue == '' && this.options.length > 0) {
                return this.options[0];
            }
            return { name: this.defaultValue};
        }
    }
};
</script>

二、修改父组件逻辑 #

父组件新增校验状态、错误提示展示，以及触发校验的逻辑：

<!-- 下拉框调用部分新增blur事件绑定，添加错误提示节点 -->
<Dropdown
    :options="getVariations"
    class="select"
    @input="getSelected"
    @blur="validateSelect"
/>
<!-- 错误提示 -->
<p v-if="selectError" class="error-tip">{{ selectErrorMsg }}</p>

<script>
import Dropdown from "../components/Dropdown";
import apiHelper from "../helpers/apiHelper";

export default {
    components: {Dropdown},
    data() {
        return {
            selected: "",
            variationId: "",
            selectedObject: null,
            // 新增校验相关状态
            selectError: false,
            selectErrorMsg: '该选项为必填项，请选择一个选项'
        };
    },
    computed: {
        getVariations() {
            return this.product.attributes.variations
        }
    },
    methods: {
        getSelected(opt) {
            this.selectedObject = opt;
            this.selected = opt.description;
            this.variationId = opt.id;
            // 选中后清除错误提示
            this.selectError = false
        },
        // 新增校验方法
        validateSelect() {
            // 真实选项一定有id属性，默认选中的{name: 'Choose an option'}没有id，以此为判断依据
            if (!this.selectedObject?.id) {
                this.selectError = true
                return false
            }
            return true
        },
        // 表单提交方法需先调用校验
        submitForm() {
            const isSelectValid = this.validateSelect()
            if (!isSelectValid) {
                return
            }
            // 其余提交逻辑
        }
    },
};
</script>
<!-- 新增错误提示样式 -->
<style scoped>
.error-tip {
    color: #f56c6c;
    font-size: 12px;
    margin: 4px 0 0 0;
}
</style>

校验逻辑说明 #

• 子组件默认返回的占位选项只有name属性，接口返回的真实选项都带有id、description等业务属性，所以直接判断selectedObject是否存在id属性即可区分是默认占位值还是用户选中的真实值
• 触发校验的时机包含两种：用户点击下拉框后失焦、提交表单前，覆盖所有常规交互场景
• 用户选中任意真实选项后会自动清除错误提示，无需额外处理

内容的提问来源于stack exchange，提问作者magic bean