vue表单必填项前面添加红色*

Twcat_tree

发布于 2022-12-05 16:45:40

2K0

发布于 2022-12-05 16:45:40

文章被收录于专栏：二猫の家

vue 表单必填项前面添加红色*和提示信息

1.效果图

2.实现代码（1）from表单定义 :rules="rules" ，:model="headerForm"

（2）文本框或者下拉框定义 :rules="rules.XXXX" ，prop="XXXX"

(3) js代码添加rules以及文本框或下拉框定义的 rules.XXXX

（4）防止保存请求后台接口，做下保存前的验证

this.$refs["headerForm"].validate((valid) => {
            // 保存前验证处理
            if (!valid) {
                this.$notify.error({
                    title: "提示",
                    message: "当前输入项有错误，请检查",
                });
            return;
            }
        });

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除

model