首页 > 其他分享 >Vue项目中elementUI表单部分验证validateField以及星号显示等问题

Vue项目中elementUI表单部分验证validateField以及星号显示等问题

时间:2024-06-21 17:31:45浏览次数:23  
标签:el Vue 验证 星号 elementUI prop 红色 validateField

原文地址:https://huaweicloud.csdn.net/63a0040fdacf622b8df90fa6.html

一、红色必填星号

  • 红色星号不显示,可能是没有正确填写prop和字段名称,检查一遍

  • 有验证规则但不想加红色星号,可以在el-form标签上加 :hide-required-asterisk=“true”

  • 当没有添加验证规则,但又要加上红色星号,可以在el-form-item标签上加 :required=“true”

二、填写后某些表单项仍然有错误提示,用validateField(prop)重新验证

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  <el-form-item label="活动名称" prop="name" :required="true">
    	<el-input v-model="ruleForm.name" @input="resetValidate('name')></el-input>
  </el-form-item>
</el-form>
resetValidate(prop){
 	this.$refs.ruleForm.validateField(prop);
}    

标签:el,Vue,验证,星号,elementUI,prop,红色,validateField
From: https://www.cnblogs.com/fswhq/p/18129064

相关文章

  • 【vue】可视化大屏实现固定比例布局(不错位)
    背景最初方案是使用dataV中的大屏自适应组件,后续发现dataV在不同显示器分辨率下的效果会不一致导致图表内容错位等问题;后续查找资料重新写自适应。组件封装resizeMixin.js//*默认缩放值constscale={width:'1',height:'1',};//*设计稿尺寸(px)cons......
  • vue3实现模拟地图上,站点名称按需显示的功能
    很久很久没有更新博客了,因为实在是太忙了,每天都有公司的事情忙不完.......最近在做车辆模拟地图,在实现控制站点名称按需显示时,折腾了好一段时间,特此记录一下。最终界面如下图所示:站点显示需求:首末站必须显示,从第一个站开始,如果站点名称能显示下,则显示,如果站点名称会重叠则隐藏,......
  • Vite+Electronss构建vue3桌面应用
    本文介绍使用vite构建Electron项目,使用@vitejs/plugin-vue插件辅助完成vue3桌面应用,主要使用Vite,Vue,Electron,@vitejs/plugin-vue四个模块。一创建项目1、输入命令npminitvite首先输入项目名称viteElectron,选择Vue框架和javascript语言2、运行项目输入命令:cdvite......
  • Vue配置项data
    data目录data目录类型介绍关键原理编译过程Vue2Vue3......
  • Vue非单文件组件
    非单文件组件......
  • vue3中如何使用pinia -- pinia使用教程(一)
    vue3中如何使用pinia--pinia使用教程(一)安装使用创建store使用store访问修改store使用组合式api创建store--setupstorepinia和hook的完美结合如何解决上面的问题使用hook管理全局状态和pinia有何优缺点?参考小结pinia是一个Vue3的状态管理库,它......
  • 开源项目推荐-vue2+element+axios 个人财务管理系统
    文章目录financialmanagement项目简介项目特色项目预览卫星的实现方式:首次进入卫星效果的实现方式:卫星跟随鼠标滑动的随机效果实现方式:环境准备项目启动项目部署项目地址financialmanagement项目简介vue2+element+axios个人财务管理系统是基于vue2+element+ax......
  • Nginx部署Vue前端项目,部署多个Vue项目
    参考:https://blog.csdn.net/qq_33454884/article/details/89212702启动闪退:https://blog.csdn.net/weixin_66383346/article/details/1326221561.下载安装nginx 下载地址:https://nginx.org/en/download.html  windows版:nginx/Windows-1.27.0解压后必须放在没有中文,没有空格......
  • vue实现的商品列表网页
    效果如下:   vue实现的商品列表网页 , 图片在vue项目的Public文件夹里的imgs中 <template><divclass="common-layout"><!--el-container:外层容器。当子元素中包含<el-header>或<el-footer>时,全部子元素会垂直上下排列,否则会水平左右排列。-->......
  • vue3 详细配置 pinia,以及持久化处理
    安装piniapnpminstallpiniapnpminstallpinia-plugin-persistedstate使用pinia根目录下创建store文件夹,新家moudules文件夹和index.ts文件,如图:index.ts文件//store/index.ts//仓库大仓库import{createPinia}from"pinia";importpiniaPluginPersisteds......