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

野性酷女 2023-09-29 14:29 115阅读 0赞

### vue [表单][Link 1]必填项前面添加红色\*和提示信息 ###

1.效果图

![在这里插入图片描述][20200811153932900.png]  
2.实现代码  
（1）from表单定义 `:rules="rules" ，:model="headerForm"`  
![在这里插入图片描述][20200827181539961.png_pic_center]

（2）[文本框][Link 2]或者下拉框 定义 `:rules="rules.XXXX" ，prop="XXXX"`  
![在这里插入图片描述][20200827172838892.png_pic_center]

(3) js代码添加rules以及文本框或下拉框定义的 `rules.XXXX`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDIxMzc2_size_16_color_FFFFFF_t_70]  
（4）防止保存请求后台接口，做下保存前的验证  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDIxMzc2_size_16_color_FFFFFF_t_70_pic_center]

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

[Link 1]: https://so.csdn.net/so/search?q=%E8%A1%A8%E5%8D%95&spm=1001.2101.3001.7020
[20200811153932900.png]: https://img-blog.csdnimg.cn/20200811153932900.png
[20200827181539961.png_pic_center]: https://img-blog.csdnimg.cn/20200827181539961.png#pic_center
[Link 2]: https://so.csdn.net/so/search?q=%E6%96%87%E6%9C%AC%E6%A1%86&spm=1001.2101.3001.7020
[20200827172838892.png_pic_center]: https://img-blog.csdnimg.cn/20200827172838892.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDIxMzc2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200811154342708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDIxMzc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDIxMzc2_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200827181134214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDIxMzc2,size_16,color_FFFFFF,t_70#pic_center