el-form-item表单根据后台返回的数据项展示校验错误信息

客户要求校验不通过时把失败原因一一对应显示在相关数据项下方 (类似form表单提示必填的效果)

本来想从自定义rules下手 顺路看了眼官网 发现有现成的! 诶嘛 真香

在el-form-item上加error 该值会使表单验证状态变为error 红框高亮 并显示该错误信息

javascript 复制代码
<el-form ref="dataForm" :model="dataForm" label-width="150px">
  <el-form-item label="姓名" prop="name" :error="nameError">
    <el-input v-model="dataForm.name" placeholder="请输入姓名" clearable style="width:100%"></el-input>
  </el-form-item>
</el-form>

data里定义

javascript 复制代码
nameError: ''

请求后台接口回显数据 拿到后台给的error信息赋值 this.nameError = res.data.xxxxx

例如 this.nameError = '姓名错误'

效果如图所示

如果不想提示文字只想显示红框高亮可以给nameError = " " (这里注意加个空格 不加空格没效果)

此外还发现了

show-message 是否显示校验错误信息

inline-message 以行内形式展示校验信息

这两属性 也是以前没注意过的

相关推荐
小周同学@2 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok2 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~2 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号2 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌3 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康3 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海4 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏4 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码4 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby5 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js